Adjusting the Info Pages

The standard Info pages are dynamically generated and displayed in the browser. The fact that PTC leverage web technology to generate the core reports has always been a fascination. In my mind these reports are what the user uses on a day to day basis. Why not customise them to plug messages that you want them to see. Or simply tweak them so they are branded with your companies logos, colours and so on. This article shows you how PTC have leveraged web-programming to provide the embedded browsers feature Info page. And then illustrates how you can also tweak PTC's code to have it look your way.

Take a look in <CREO INSTALL> / Creo 3.0 / M040 / Common Files / proe / prowttools / text / usascii. Here you'll find a large number of files to have fun exploring.

 

featInfo.xsl

Most importantly for our quest of tweaking Pro/E's Feature Info page is featinfo.xsl. This Stylesheet file dynamically builds the info page you see when using Pro/ENGINEER Wildfire.

The file itself is quite hard work to read through completely but have a look for the following, '<xsl:template match="/">'.

 

<xsl:template match="/">

This area of the stylesheet is the root template. It generates the outline of the whole page. In the picture below i have already added a couple of extra lines into the file. A word of caution is advised however when hacking these pages,

  • MAKE A COPY OF THE ORIGINAL (if you screw it up, Creo will crash rather than give you a page!)
  • CLOSE ALL TAGS - every <TAG> should have a </TAG> or for empty elements written as <TAG/> (because XML is more picky)
  • TEST TEST TEST - make small changes and test-test-test rather than assume you won't make typos.
  • This result of this addition can be seen in the picture shown right.

    It is worth noting that you may also wish to actually change the overall style scheme (colours and all). This is actually controlled at a more global level through a file called ftinfoStyle.css located in <CREO INSTALL> / Creo 3.0 / M040 / Common Files / proe / prowttools / text / scripts.
     

    ftinfoStyle.css

    Again this file is somewhat tedious to step through but it does control the overall look and feel for your page.

    I find trying to remember all the possible options for CSS too much and instead rely on tools like TopStyleLite to provide me with all the valid options straight away. If you don't have a tool like this you need to go and find a decent CSS quick reference card (go to Google and take your pick!).

     

    <xsl:variable name="CssFile" select="ext:srch-path('ftinfoStyle.css')"/>

    Rather than risk damaging the look and feel for every page, save the ftinfoStyle.css file to e.g. ftinfoStyle_custom.css and then edit the featinfo.xsl file as per the picture right.

    Just to demonstrate a point, I've changed 'footerbg' classes background property to be 'red' and also 'tableHdr' background to be 'blue'.

    Now so far you've been able to adjust the basic visual aspects of the existing components. What if you want to put something more dynamic into the page?

     

    Adding Your Own Table

    <DIV id="Custom_Table"></DIV>
    <SCRIPT>
    var NumRows = 4;
    var NumCols = 2;
    var Out = "<TABLE border=1>"+
      "<THEAD><TR>"+
      "<TH>Parameter Name</TH>"+
      "<TH>Parameter Value</TH>"+
      "</TR></THEAD><TBODY>";
    for (var i=0;i<NumRows;i++)
    {
      Out+="<TR>";
      for (var j=0;j<NumCols;j++)
      {
        Out+="<TD>Entry_"+
          (i+1)+
          "_"+
          (j+1)+
          "</TD>";
      }
      Out+="</TR>";
    }
    Out+="</TABLE>";
    Custom_Table.innerHTML = Out;
    </SCRIPT>
    

    See right for an example, the code right dynamically builds a simple table as shown in the picture below.

    Once we have some working code snippets we can add them to the featinfo.xsl file. In particular to add a table to the end of the page, insert a little bit of HTML directly into the style sheet inside the 'root' template.

    Static HTML page with PVX in it

    Working code (with Pro/Web.Link of course in your examples!) can be cut and pasted in between the SCRIPT tags. The catch is that it is neccessary to encode the characters to make it work (so '<' becomes '&lt;'). If you've taken my advice and are using notepad++ then this is actually quite a simple task using the TextFX Convert functions.

     

     

    Now as i've made clear in my book, JavaScript and the web are meant to be dynamic. Dynamic means we do something 'on the fly' (at or after load time). I'm going to leave that peice of the puzzle for you. For now here's what the code looked like to make a table that looked like PTC put it there.

    To Style a table to look [almost] exactly like PTC's do the following

  • Set 'class' to 'bodybg' for the Table
  • Make a Table with 2 header rows
  • Set first header row 'colspan' to 2
  • Set first header row 'class' to 'tabletitlebg'
  • Set second header row 'class' to 'tablecolumnheaderbg'
  • You may even decide to colour alternate rows as per PTC's styling. I'll leave it as an experiment to the reader to figure out which CSS classes control this.

    Conclusion

    Because Creo's information pages are now defined with web technology, it is easily possible to extend them to suit your purposes.

    A big warning should be issued of course. Each time you re-install Creo these files will be overwritten. Each time a new release of Creo is issued you will have to re-paste your customisations into the new versions of the files. If you're willing to live with this then go ahead and start hacking.