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.
- In the Environments
Tree panel, under the Content node, expand the RDFTemplates folder,
the Common folder, and the template folder.
- 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.
- 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.
- 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>.
- On the Components tab, in the Containers group,
click Panel.
The pointer becomes a crosshair.
- Draw a new panel inside the main container panel.
- In the Properties panel, make the following changes:
- For the Unique Identifier property value, type column1.
- For the Class identifier (CSS) property value, type column
column-6w.
- For the Left property value, type 0px.
- For the Top property value, type 0px.
- Delete any text in the Width property value.
- 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.
- On the Components tab, in the Containers group,
click Panel.
The pointer becomes a crosshair.
- Draw another panel next to the previous panel.
- In the Properties panel, make the following changes:
- For the Unique Identifier, type column2.
- For the Class identifier (CSS) property value, type column
column-6w.
- For the Left property value, type 50%.
- For the Top property value, type 0px.
- Delete any text in the Width property value.
- 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.
- On the Components tab, in the Containers group,
click Panel.
The pointer becomes a crosshair.
- Draw a panel inside column1.
- In the Properties panel, make the following changes:
- For the Unique Identifier property value, type content1-panel1.
- For the Class identifier (CSS) property value, type panel
panel-6w panel-box.
- For the Left property value, type 0px.
- For the Top property value, type 0px.
- Delete any text in the Width property value.
- For the Height property value, type 340px.
This
creates a panel that is 340 pixels tall, located at the top of column1.
- On the Components tab, in the Generic Elements group,
click Label.
The pointer becomes a crosshair.
- Draw a label inside the first content panel (content1-panel1,
created in steps 9 and 10).
- In the Properties panel, make the following changes:
- For the Class identifier (CSS) property value, type title-tab
tab-text.
- For the Left property value, type 0px.
- For the Top property value, type 0px.
- For the Width property value, type 100%.
- For the Height property value, type 40px.
- 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.
- On the Components tab, in the Containers group,
click Panel.
The pointer becomes a crosshair.
- Draw a second panel beneath content1-panel1.
- In the Properties panel, make the following changes:
- For the Unique Identifier, type content1-panel2.
- For the Class identifier (CSS) property value, type panel
panel-6w panel-box.
- For the Left property value, type 0px.
- For the Top property value, type 380px.
- Delete any text in the Width property value.
- For the Height property value, type 340px.
- On the Components tab, in the Generic Elements group,
click Label.
The pointer becomes a crosshair.
- Draw a label inside the second panel.
- In the Properties panel, make the following changes:
- For the Class identifier (CSS) property value, type title-tab
tab-text.
- For the Left property value, type 0px.
- For the Top property value, type 0px.
- For the Width property value, type 100%.
- For the Height property value, type 40px.
- Under Edges, for the Padding-left property value, type 15px.
- On the Components tab, in the Containers group,
click Panel.
The pointer becomes a crosshair.
- Draw a third panel inside the column on the right side.
- In the Properties panel, make the following changes:
- For the Unique Identifier property value, type content1-panel3.
- For the Class identifier (CSS) property value, type panel
panel-6w panel-box.
- For the Left property value, type 0px.
- For the Top property value, type 0px.
- Delete any text in the Width property value.
- For the Height property value, type 340px.
This
creates a panel that is 340 pixels tall, located at the top of column 2.
- On the Components tab, in the Generic Elements group,
click Label.
The pointer becomes a crosshair.
- Draw a label inside the top content panel in the right column
(content1-panel3).
- In the Properties panel, make the following changes:
- For the Class identifier (CSS) property value, type title-tab
tab-text.
- For the Left property value, type 0px.
- For the Top property value, type 0px.
- For the Width property value, type 100%.
- For the Height property value, type 40px.
- Under Edges, for the Padding-left property value, type 15px.
- On the Components tab, in the Containers group,
click Panel.
The pointer becomes a crosshair.
- Draw a fourth panel beneath content1-panel3.
- In the Properties panel, make the following changes:
- For the Unique Identifier, type content1-panel4.
- For the Class identifier (CSS) property value, type panel
panel-6w panel-box.
- For the Left property value, type 0px.
- For the Top property value, type 380px.
- Delete any text in the Width property value.
- For the Height property value, type 340px.
- On the Components tab, in the Generic Elements group,
click Label.
The pointer becomes a crosshair.
- Draw a label inside the second panel on the right side.
- In the Properties panel, make the following changes:
- For the Class identifier (CSS) property value, type title-tab
tab-text.
- For the Left property value, type 0px.
- For the Top property value, type 0px.
- For the Width property value, type 100%.
- For the Height property value, type 40px.
- Under Edges, for the Padding-left property value, type 15px.
You
have now created four equally large panels with labels.
- 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.
- Save the HTML page and run it.
- 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 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.
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:
- 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
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.
- 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.