Panels are formatted and arranged on the canvas according to CSS classes. Some are used to define the panel size, while others are used to control styling.

To view detailed panel size settings, in the Environments Tree panel, under the Content node, expand the RDFTemplates folder, the Common folder, and the css folder. Then open the grid_flex_with_margin.css file.

To view the theme definition, in the Environments Tree panel, under the Content node, expand the RDFTemplates folder, the Common folder, the css folder, and the theme folder. Then open the angular.css file.

The template names reflect the arrangement of panels on the template. For example, template1 contains a single panel. Similarly, template12 contains a row with one panel above a row with two panels, and template222 contains three rows, each containing two panels.

In this example, you will use an RDF template to create your own responsive page by modifying one of the templates that is included with the RDF Add-on.

Note: In this procedure, sample files are viewed by name in the App Studio Environments Tree panel. However, the default in App Studio is View items by Title. To change the default, click the View Options icon on the Environments Tree toolbar and click View items by Name.

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. Right-click each chart frame one at a time and click Reference existing procedure to add content.

   The Open File dialog box opens.

7. Expand the RDFTemplates folder, the doc folder, the gadget folder, the chart folder, and the angular folder, and then select the following files:
   • bar.fex
   • compose.fex
   • donut_pie.fex
   • multiple.fex
8. When prompted to create controls, click Cancel.
9. Double-click the text at the top of each frame to edit the frame labels.
10. Save the HTML page and run it.
11. Resize your browser window. Your content automatically resizes and stacks depending on the size of your window.

This responsive HTML page can also be deployed inside a standard BI Portal, as outlined in Integrating Responsive Pages into the BI Portal.

Following a similar process, you can use these templates to create InfoApps, dashboards, and Guided Self-Service applications. In some cases, rather than placing procedures into the frames, you may want to remove them and add controls, such as drop-downs, text boxes, or buttons, into these panels.