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.

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

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

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.

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.

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:

Resize (included in the RDF templates)
Excel export
PDF export
Resize and rerun

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

ON TABLE PCHOLD FORMAT &WFFMT

for a report, or by changing

ON GRAPH PCHOLD FORMAT JSCHART

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.

Top of page

Example: Enabling Panel Buttons

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

In the Environments Tree panel, under the Content node, expand the RDFTemplates folder, the Common folder, and the template folder.
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.
In the Environments Tree panel, click the copied file to select it.
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.
Double-click the renamed file, or right-click the file and click Open.
The HTML canvas opens.
Right-click the chart component and click Reference existing procedure.
The Open File dialog box opens.
Expand the RDFTemplates folder, the doc folder, the gadget folder, and the report folder, and then select the sample_report.fex file.
Click OK.
Click Cancel when prompted to create new parameters.
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.
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.
Save the HTML page and run it.
Click the PDF icon on the content panel title bar.
A PDF version of the report opens in a new window.
Return to the HTML canvas.
In the Properties panel, access the properties of the content panel.
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.
Save the HTML page and run it.
The content panel now has both a PDF and an Excel export button at the top.
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.