Using the RDF Grid

By changing the CSS classes of the panels in the RDF templates, you can create your own custom layouts and add other features to your RDF page. These CSS classes include panel classes and column classes. A list of the panel classes that determine proportionate width can be found in Layout of Panels.


Top of page

Example: Creating a Custom Template

This example shows how to create a simple template with a modified panel configuration like the one shown in the following diagram.

The custom template to be created in this example.

  1. In the Environments Tree panel, under the Content node, expand the RDFTemplates folder, the Common folder, and the template folder.
  2. Copy the template22.htm file to a new folder or existing folder under the Content node. This enables you to perform the steps in the following example without overwriting the original template.
  3. In the Environments Tree panel, click the copied file to select it.
  4. In the File/Folder Properties panel, rename the file and type a new title, keeping the .htm extension.

    The file refreshes in the Environments Tree panel and reflects the new name.

  5. Double-click the renamed file, or right-click the file and click Open.

    The HTML canvas opens.

  6. Select the top-left frame, and in the Properties panel, ensure that you have the content panel selected (content1-panel1 <DIV>). If not, use the drop-down menu at the top of the Properties panel to select it, as shown in the following image.

    The Properties panel drop down menu.

    This selects the entire panel and enables you to set properties for all content within the panel.

  7. In the Core attributes section of the Properties panel, set the Class identifier (CSS) property value to panel panel-3w panel-box resize.

    The box resizes to half of its original width and occupies 1/4 of the width of the container, as shown in the following image.

    The first panel is 1/4 the width of the page, while the second is still halfway across and half the width of the page.

  8. Select the top-right frame, and in the Properties panel, ensure that you have the content panel selected (content1-panel2 <DIV>). If not, use the drop-down menu at the top of the Properties panel to select it.
  9. In the Style attributes section of the Properties panel, set the Left property value to 25% and set the Class identifier (CSS) property value to panel panel-3w panel-box resize.

    This resizes the panel to 1/4 of the width of the container and moves it adjacent to the first panel.

  10. Select the bottom-left frame, and in the Properties panel, ensure that you have the content panel selected (content1-panel3 <DIV>). If not, use the drop-down menu at the top of the Properties panel to select it.
  11. In the Style attributes section, set the Top property value to 0px and the Left property value to 50%.

    This moves the panel to the top-right of its container, as shown in the following image.

    The three panels are on the top row.

  12. Select the bottom-right frame, and in the Properties panel, ensure that you have the content panel selected (content1-panel4 <DIV>). If not, use the drop-down menu at the top of the Properties panel to select it.
  13. In the Style attributes section of the Properties panel, set the Left property value to 0px and set the Class Identifier (CSS) property value to panel panel-12w panel-box resize.

    This adjusts the content panel to start at the left side of the container panel and take up the entire width of the container.

    You now have a page with two quarter-width panels and one half-width panel at the top, and one full-width panel at the bottom, as shown in the following image.

    Finished custom layout, with 2 quarter-width and 1 half-width panel on top and one full-width panel on the bottom.

  14. Save the file.

You can use the same technique to set the panel sizes and reposition the panels. The RDF Add-on supports many different panel sizes.


Top of page

Example: Coordinating Panel Stacking

The following example shows you how to create a template with two independent columns, each with its own sets of panels. As the screen becomes smaller, column two folds beneath column one, as shown in the following diagram.

A diagram showing that the two leftmost panels will stack on top of the two rightmost panels when the screen is too narrow to show them adjacent to each other.

  1. In the Environments Tree panel, under the Content node, expand the RDFTemplates folder, the Common folder, and the template folder.
  2. Copy template22.htm to a new folder or existing folder under the Content node. This enables you to perform the steps in the following example without overwriting the original template.
  3. In the Environments Tree panel, click the copied file to select it.
  4. In the File/Folder Properties panel, rename the file and type a new title, keeping the .htm extension.

    The file refreshes in the Environments Tree panel and reflects the new name.

  5. Double-click the renamed file, or right-click the file and click Open.

    The HTML canvas opens.

  6. Delete all of the content panels from the page, as shown in the following image. These are identified with names such as contentx-panelx <DIV>.

    An RDF page with all of the content panels deleted

  7. On the Components tab, in the Containers group, click Panel.

    The pointer becomes a crosshair.

  8. Draw a new panel inside the main container panel.
  9. In the Properties panel, make the following changes:
    1. For the Unique Identifier property value, type column1.
    2. For the Class identifier (CSS) property value, type column column-6w.
    3. For the Left property value, type 0px.
    4. For the Top property value, type 0px.
    5. Delete any text in the Width property value.
    6. For the Height property value, type 800px.

    This creates a column that is half the container panel in width and 800 pixels tall, positioned along the top and left sides of the container, as shown in the following image.

    An image of the empty container panel with one column on the left.

  10. On the Components tab, in the Containers group, click Panel.

    The pointer becomes a crosshair.

  11. Draw another panel next to the previous panel.
  12. In the Properties panel, make the following changes:
    1. For the Unique Identifier, type column2.
    2. For the Class identifier (CSS) property value, type column column-6w.
    3. For the Left property value, type 50%.
    4. For the Top property value, type 0px.
    5. Delete any text in the Width property value.
    6. For the Height property value, type 800px.

    This results in a column that is half the container panel in width and 800 pixels tall. It is positioned along the top and right sides of the container.

    Next, draw content panels inside the column panels.

  13. On the Components tab, in the Containers group, click Panel.

    The pointer becomes a crosshair.

  14. Draw a panel inside column1.
  15. In the Properties panel, make the following changes:
    1. For the Unique Identifier property value, type content1-panel1.
    2. For the Class identifier (CSS) property value, type panel panel-6w panel-box.
    3. For the Left property value, type 0px.
    4. For the Top property value, type 0px.
    5. Delete any text in the Width property value.
    6. For the Height property value, type 340px.

    This creates a panel that is 340 pixels tall, located at the top of column1.

  16. On the Components tab, in the Generic Elements group, click Label.

    The pointer becomes a crosshair.

  17. Draw a label inside the first content panel (content1-panel1, created in steps 9 and 10).
  18. In the Properties panel, make the following changes:
    1. For the Class identifier (CSS) property value, type title-tab tab-text.
    2. For the Left property value, type 0px.
    3. For the Top property value, type 0px.
    4. For the Width property value, type 100%.
    5. For the Height property value, type 40px.
    6. Under Edges, for the Padding-left property value, type 15px.

    This creates a label that is the full width of content1-panel1 and 40 pixels tall, located along the top and left sides of the content panel, and with 15 pixels between the label text and the left side of the label, as shown in the following image.

    Image of a panel with a label.

  19. On the Components tab, in the Containers group, click Panel.

    The pointer becomes a crosshair.

  20. Draw a second panel beneath content1-panel1.
  21. In the Properties panel, make the following changes:
    1. For the Unique Identifier, type content1-panel2.
    2. For the Class identifier (CSS) property value, type panel panel-6w panel-box.
    3. For the Left property value, type 0px.
    4. For the Top property value, type 380px.
    5. Delete any text in the Width property value.
    6. For the Height property value, type 340px.
  22. On the Components tab, in the Generic Elements group, click Label.

    The pointer becomes a crosshair.

  23. Draw a label inside the second panel.
  24. In the Properties panel, make the following changes:
    1. For the Class identifier (CSS) property value, type title-tab tab-text.
    2. For the Left property value, type 0px.
    3. For the Top property value, type 0px.
    4. For the Width property value, type 100%.
    5. For the Height property value, type 40px.
    6. Under Edges, for the Padding-left property value, type 15px.
  25. On the Components tab, in the Containers group, click Panel.

    The pointer becomes a crosshair.

  26. Draw a third panel inside the column on the right side.
  27. In the Properties panel, make the following changes:
    1. For the Unique Identifier property value, type content1-panel3.
    2. For the Class identifier (CSS) property value, type panel panel-6w panel-box.
    3. For the Left property value, type 0px.
    4. For the Top property value, type 0px.
    5. Delete any text in the Width property value.
    6. For the Height property value, type 340px.

    This creates a panel that is 340 pixels tall, located at the top of column 2.

  28. On the Components tab, in the Generic Elements group, click Label.

    The pointer becomes a crosshair.

  29. Draw a label inside the top content panel in the right column (content1-panel3).
  30. In the Properties panel, make the following changes:
    1. For the Class identifier (CSS) property value, type title-tab tab-text.
    2. For the Left property value, type 0px.
    3. For the Top property value, type 0px.
    4. For the Width property value, type 100%.
    5. For the Height property value, type 40px.
    6. Under Edges, for the Padding-left property value, type 15px.
  31. On the Components tab, in the Containers group, click Panel.

    The pointer becomes a crosshair.

  32. Draw a fourth panel beneath content1-panel3.
  33. In the Properties panel, make the following changes:
    1. For the Unique Identifier, type content1-panel4.
    2. For the Class identifier (CSS) property value, type panel panel-6w panel-box.
    3. For the Left property value, type 0px.
    4. For the Top property value, type 380px.
    5. Delete any text in the Width property value.
    6. For the Height property value, type 340px.
  34. On the Components tab, in the Generic Elements group, click Label.

    The pointer becomes a crosshair.

  35. Draw a label inside the second panel on the right side.
  36. In the Properties panel, make the following changes:
    1. For the Class identifier (CSS) property value, type title-tab tab-text.
    2. For the Left property value, type 0px.
    3. For the Top property value, type 0px.
    4. For the Width property value, type 100%.
    5. For the Height property value, type 40px.
    6. Under Edges, for the Padding-left property value, type 15px.

    You have now created four equally large panels with labels.

  37. Change the text in each of the labels as shown in the following image. This will help illustrate how responsive panels automatically re-orient when screen size decreases.

    The four panels with numbered labels to help track how they are folding.

  38. Save the HTML page and run it.
  39. Start with a full screen and reduce the width of the browser window. Notice that Widget III and Widget IV stack below Widget I and Widget II, as shown in the following image.

    The panels stack by columns as a result of this procedure instead of the standard stacking by rows.

The original template without the column panels behaves differently. Without the two columns set up, Widget III would go directly below Widget I and Widget IV would go directly below Widget II.


Top of page

x
Reference: Using the Panel Button Options in an RDF Page

The panel button options include the ability to add the following buttons to the top of your content panels:

To enable these panel buttons in your own content, add a few lines of syntax to the procedures that you are adding to the HTML page. To do so, find the procedure that you wish to add to your HTML page in the Environments Tree panel. Right-click the procedure file and click Open in Text Editor.

For a report, type the following two lines above the line listing the Master File:

-DEFAULT &FMT = ‘DEFAULT’;
-SET &WFFMT = IF &FMT EQ ‘DEFAULT’ OR ‘MAX’ THEN ‘HTML’ ELSE &FMT;

The syntax of the SET function will read as follows if the procedure being configured is an HTML5 Chart:

-SET &WFFMT = IF &FMT EQ ‘DEFAULT’ OR ‘MAX’ THEN ‘JSCHART’ ELSE &FMT;

Set the format to &WFFMT by changing

ON TABLE PCHOLD FORMAT HTML

to

ON TABLE PCHOLD FORMAT &WFFMT

for a report, or by changing

ON GRAPH PCHOLD FORMAT JSCHART

to

ON GRAPH PCHOLD FORMAT &WFFMT

for an HTML5 chart.

Below is the full syntax of a sample report to which a panel button could be added. Necessary lines are in bold:

-DEFAULT &FMT = 'DEFAULT';
-SET &WFFMT = IF &FMT EQ 'DEFAULT' OR 'MAX' THEN 'HTML' ELSE &FMT;
TABLE FILE WF_RETAIL_LITE
SUM
     WF_RETAIL_LITE.WF_RETAIL_SALES.QUANTITY_SOLD
     WF_RETAIL_LITE.WF_RETAIL_SALES.REVENUE_US
BY  WF_RETAIL_LITE.WF_RETAIL_GEOGRAPHY_CUSTOMER.BUSINESS_SUB_REGION
BY  WF_RETAIL_LITE.WF_RETAIL_PRODUCT.PRODUCT_CATEGORY
ON TABLE SET PAGE-NUM NOLEAD
ON TABLE SET ASNAMES ON
ON TABLE NOTOTAL
ON TABLE PCHOLD FORMAT &WFFMT
ON TABLE SET HTMLEMBEDIMG ON
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
     INCLUDE = IBFS:/EDA/EDASERVE/_EDAHOME/ETC/endeflt.sty,
$
     INCLUDE = IBFS:/WFC/Repository/RDFTemplates/Common/sty/angular.sty,
$
TYPE=REPORT,
     CALC-LOCATION=TOP,
$
TYPE=REPORT,
     OBJECT=STATUS-AREA,
     JUSTIFY=LEFT,
     PAGE-LOCATION=BOTTOM,
$
ENDSTYLE
END 

For an HTML5 chart, you change the SET function to:

-SET &WFFMT = IF &FMT EQ ‘DEFAULT’ OR ‘MAX’ THEN ‘JSCHART’ ELSE &FMT;

and the ON TABLE PCHOLD function to:

ON GRAPH PCHOLD FORMAT &WFFMT

Once you add your content to the page, make sure the FMT variable has been added to your procedures using the syntax above, and connect that variable to the “format” control in the Parameters tab.



Example: Enabling Panel Buttons

This example shows how to add optional panel buttons to an HTML page.

  1. In the Environments Tree panel, under the Content node, expand the RDFTemplates folder, the Common folder, and the template folder.
  2. Copy the template1.htm file to a new folder or existing folder under the Content node. This enables you to perform the steps in the following example without overwriting the original template.
  3. In the Environments Tree panel, click the copied file to select it.
  4. In the File/Folder Properties panel, rename the file and type a new title, keeping the .htm extension.

    The file refreshes in the Environments Tree panel and reflects the new name.

  5. Double-click the renamed file, or right-click the file and click Open.

    The HTML canvas opens.

  6. Right-click the chart component and click Reference existing procedure.

    The Open File dialog box opens.

  7. Expand the RDFTemplates folder, the doc folder, the gadget folder, and the report folder, and then select the sample_report.fex file.
  8. Click OK.
  9. Click Cancel when prompted to create new parameters.
  10. Select the panel, and in the Properties panel, ensure that you have the content panel selected. It is labeled <DIV> and has the name content1-panel1. If not, use the drop-down menu at the top of the Properties panel to find it.
  11. For the Class identifier (CSS) property value, type panel panel-12w panel-box resize pdf.

    This will add a PDF button next to the standard Resize button at the top of the content panel.

  12. Save the HTML page and run it.
  13. Click the PDF icon on the content panel title bar.

    A PDF version of the report opens in a new window.

  14. Return to the HTML canvas.
  15. In the Properties panel, access the properties of the content panel.
  16. For the Class identifier (CSS) property value, type panel panel-12w panel-box resize pdf excel.

    This adds an Excel button next to the PDF and Resize buttons, when you run the page.

    Note: The words internal default are automatically appended to the end of the Class identifier (CSS) property value. You may delete those words when working with the value. The system restores them after you save the file.

  17. Save the HTML page and run it.

    The content panel now has both a PDF and an Excel export button at the top.

  18. Click the Excel icon on the content panel title bar. You are prompted to save an .xlsx spreadsheet.

Additionally, you can set the Resize button to refresh the page in addition to resizing the panel when it is clicked by adding rerun to the Class identifier (CSS) property value.


WebFOCUS