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.
The file refreshes in the Environments Tree panel and reflects the new name.
The HTML canvas opens.
The Open File dialog box opens.
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.