Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio Release 8.1 Version 05

Transcription

1 Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio Release 8.1 Version 05 May 9, 2018

2 Active Technologies, EDA, EDA/SQL, FIDEL, FOCUS, Information Builders, the Information Builders logo, iway, iway Software, Parlay, PC/FOCUS, RStat, Table Talk, Web390, WebFOCUS, WebFOCUS Active Technologies, and WebFOCUS Magnify are registered trademarks, and DataMigrator and Hyperstage are trademarks of Information Builders, Inc. Adobe, the Adobe logo, Acrobat, Adobe Reader, Flash, Adobe Flash Builder, Flex, and PostScript are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Due to the nature of this material, this document refers to numerous hardware and software products by their trademarks. In most, if not all cases, these designations are claimed as trademarks or registered trademarks by their respective companies. It is not this publisher's intent to use any of these names generically. The reader is therefore cautioned to investigate all claimed trademark rights before using any of these names other than to refer to the product described. Copyright 2015, by Information Builders, Inc. and iway Software. All rights reserved. Patent Pending. This manual, or parts thereof, may not be reproduced in any form without the written permission of Information Builders, Inc.

3 Contents Preface Documentation Conventions Related Publications Customer Support User Feedback Information Builders Consulting and Training Getting Started With the Responsive Design Framework Overview Contents of the RDF Add-on Importing and Configuring the RDF Add-on Procedure: How to Import the RDF Add-on Change Management Package Reference: Configuring Existing Content for the RDF Add-on Introducing RDF Panels Reference: CSS Classes Reference: Layout of Panels Introducing RDF Templates Tips for Using RDF Add-on Templates Creating Responsive Pages Using the RDF Grid Reference: Using the Panel Button Options in an RDF Page Working With Filters Integrating Responsive Pages into the BI Portal Procedure: How to Add RDF Pages to a BI Portal Customer Connections Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 3

4 Contents 4 WebFOCUS

5 Preface This documentation outlines the installation and use of the Responsive Design Framework (RDF) Add-on for WebFOCUS App Studio. It includes basic instructions, as well as procedures to help familiarize the user with the product and its capabilities. How This Manual Is Organized This manual includes the following chapters: 1 Chapter/Appendix Getting Started With the Responsive Design Framework Contents Introduces the Responsive Design Framework Add-on for WebFOCUS App Studio and provides examples to get you started. Documentation Conventions The following table describes the documentation conventions that are used in this manual. Convention THIS TYPEFACE or Description Denotes syntax that you must enter exactly as shown. this typeface this typeface underscore Represents a placeholder (or variable) in syntax for a value that you or the system must supply. Indicates a default setting. this typeface Represents a placeholder (or variable), a cross-reference, or an important term. It may also indicate a button, menu item, or dialog box option that you can click or select. Related Publications Visit our Technical Content Library at You can also contact the Publications Order Department at (800) Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 5

6 Customer Support Customer Support User Feedback Information Builders customers can rely on our technical support every day. The Technical Support Center is our upgraded technical support website, which includes several customer requested, and customer-approved, features: responsive design, coordinated search, self-service knowledge base, and technical videos. Visit the Technical Support Center at In an ongoing effort to reflect our customers feedback in the technical content development process, we have established a Customer Connections program that enables customers to share feedback about a particular manual, join a usability project, or test our developing content management products and applications. To learn more, or join a Customer Connections program, visit Thank you, in advance, for your comments. Information Builders Consulting and Training Interested in training? Information Builders Education Department offers a wide variety of training courses for this and other Information Builders products. For information on course descriptions, locations, and dates, or to register for classes, visit our website ( or call (800) 969-INFO to speak to an Education Representative. 6 WebFOCUS

7 Chapter 1 Getting Started With the Responsive Design Framework What is Responsive Web Design? Responsive web design is an approach to webpage design, where content is formatted to fit a variety of different window and screen sizes. This allows content to be easily viewed on various window sizes, such as on a laptop, tablet, or smartphone. Since responsive pages adapt to fit the size of the screen or window that they inhabit, they are more user friendly and aesthetically pleasing. In this chapter: Overview Contents of the RDF Add-on Importing and Configuring the RDF Add-on Introducing RDF Panels Introducing RDF Templates Creating Responsive Pages Using the RDF Grid Working With Filters Integrating Responsive Pages into the BI Portal Overview The Responsive Design Framework Add-on (RDF Add-on) for WebFOCUS App Studio provides responsive templates that make it easy for you to create responsive content that automatically adapts for display on different window sizes and devices. You are not required to know JavaScript or CSS in order to use the RDF Add-on. However, if you are familiar with JavaScript or CSS, you can leverage the RDF Add-on using the grid CSS file and a theme CSS file to further control the responsiveness and the look and feel of content that you create using the add-on. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 7

8 Contents of the RDF Add-on The RDF Add-on is designed to work with WebFOCUS App Studio Release 8.1 Version 05 and higher. The RDF Add-on will also be compatible with future versions of App Studio. However, files created with the RDF Add-on cannot be converted to make use of other responsive design features in App Studio Release 8.2 and higher. Features Below are some of the responsive design features that are available in the RDF Add-on: Responsive Templates. Includes 26 App Studio compatible templates that you can use to assemble responsive dashboards or responsive InfoApps. Grid-Based Positioning. Enables dynamic sizing of rows and columns. The standard margin size between rows and columns of panels is 20 pixels, but the margins can be changed by adjusting the Margin property value in the Properties panel. Boxed Layout. Renders contents on the page with up to three separate break points (1200px, 600px, px) for desktop, tablet, and smartphone screens. They are always centered, leaving small spaces to the sides to facilitate access to the canvas. Wide Layout. Contents on the page will fill up the entire width of the screen. Break points are still enforced to allow contents to fold as the screen becomes narrower. Auto Resizing. Allows the panels to resize depending on available screen space. Content Folding. Content will reposition itself responsively and remain whole as a screen gets smaller, instead of displaying partial content with scroll bars. Contents of the RDF Add-on The RDF Add-on Change Management package includes: A demo portal, showcasing the features of the RDF Add-on. Responsive templates in a number of different layouts, which can be customized. Style sheets and procedures to facilitate global filtering for RDF pages. Cascading style sheet (CSS) files to format the layout of the page. The angular.css file and angular.sty StyleSheet, as well as accompanying open source fonts, to give your content a more modern look and feel. Sample charts and procedure files that you can use to complete the practice procedures in this guide. 8 WebFOCUS

9 1. Getting Started With the Responsive Design Framework Importing and Configuring the RDF Add-on The RDF Add-on is distributed as a single Change Management package that can be imported in the WebFOCUS Business Intelligence Portal (BI Portal). To access the contents of the package, unzip the file and move the RDFTemplates folder, which contains the RDF Add-on contents, to the following location on your machine: drive:\ibi\webfocus81\cm\import Adding content to this folder will make it accessible from the Change Management Import facility in the WebFOCUS BI Portal. Note: If you are using a different version of WebFOCUS or changed some of your settings during the installation of WebFOCUS, you may need to move the package to a different folder to make it accessible for a Change Management Import. Before importing the RDF Add-on Change Management Package, ensure that the following settings are configured accordingly in the Administration Console. IBI_CM_Format_Raw is set to TRUE IBI_CM_Retail_Handles is set to FALSE Procedure: How to Import the RDF Add-on Change Management Package 1. Access the WebFOCUS Business Intelligence Portal in one of the following ways: In a web browser, type From the Environments Tree panel in App Studio, select the WebFOCUS environment where the RDF Change Management package is available, and then click BI Portal from the WebFOCUS Administration menu. 2. In the Resources tree, expand the Change Management node, and then expand Import. The package containing the RDF Add-on should be available. If not, right-click Import and click Refresh. If it still does not appear, make sure that the change package has been unzipped and moved into the correct folder to make it accessible. 3. Right-click RDFTemplates and click Import. The Import Package dialog box opens. 4. Select your preferred options and click OK. 5. Right-click the Content node and click Refresh. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 9

10 Importing and Configuring the RDF Add-on A new folder containing the RDF Add-on appears. This folder will also be available in the Content node, in the Environments Tree panel in App Studio. Reference: Configuring Existing Content for the RDF Add-on The RDF Add-on content is configured for use with the angular.sty StyleSheet, so pre-existing content made using other WebFOCUS StyleSheets may not format correctly when referenced or imported in an RDF page. To format them for use with the RDF Add-on, you will need to include the path to the angular.sty StyleSheet. Right-click the procedure file in the App Studio Environments Tree panel and click Open in Text Editor. Add the following lines of syntax after the line ON GRAPH SET STYLE * or ON TABLE SET STYLE *: INCLUDE=filepath1/original.sty INCLUDE=filepath2/angular.sty where: filepath1 Is the full file path of the folder containing the StyleSheet originally used for the pre-existing file. original.sty Is the name of the StyleSheet, including the.sty extension, originally used for the pre-existing file. filepath2 Is the file path of the folder containing the angular.sty StyleSheet file contained within the RDF Add-on. 10 WebFOCUS

11 1. Getting Started With the Responsive Design Framework Introducing RDF Panels RDF pages are designed around the grid architecture shown in the following image. 1. Outer Panels. Contain the outer sections containing the title and filters. 2. Container Panels. Are the panels inside the outer panel that contain the content panels. The container panels are always centered on the screen (in the boxed layout) and the widths are adjusted for different screen resolutions. This is done with CSS3 media queries behind the scenes. 3. Content Panels. Contain HTML components and control objects. The content panels are also adjusted for different screen resolutions and will be influenced by the available space within its parent container panel. As container panels get narrower, the content panels fold underneath each other. The resizing of these panels is determined by the CSS relative positioning and float properties (for example, float: left). The RDF Add-on uses JavaScript to dynamically assign these properties at runtime. This allows you to keep using absolute positioning during development in App Studio, if you follow the Unique Identifier and CSS class standards required by the framework. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 11

12 Introducing RDF Panels Reference: CSS Classes When constructing or modifying RDF panels in App Studio, each panel object should be assigned to a CSS class as defined by the grid CSS and, optionally, a CSS class as defined by the theme CSS. The following are the grid CSS classes assigned to each panel type: Outer panels are assigned to the grid CSS class -outer. Container panels are assigned to the grid CSS class container-. Content panels are assigned to the grid CSS class panel panel-. Reference: Layout of Panels Standard content panel sizes range from 1/12 of the container width to the full width of the container. The following are the CSS classes that determine the width of each responsive panel: CSS class panel-1w is 1/12 of the container width. CSS class panel-2w is 1/6 of the container width. CSS class panel-3w is 1/4 of the container width. CSS class panel-4w is 1/3 of the container width. CSS class panel-6w is 1/2 of the container width. CSS class panel-8w is 2/3 of the container width. CSS class panel-12w is the full width of the container. 12 WebFOCUS

13 1. Getting Started With the Responsive Design Framework Standard panel sizes are shown in the following image. If you create your own panel layout instead of using a template, you can set the content of the panels to responsively resize by setting the Width property value in the App Studio Properties panel to 100%. If the contents are not sizing as expected, make sure that they are children of the correct panel by checking the drop-down menu at the top of the Properties panel. They should appear indented directly underneath the appropriate content panel. If they are not, you can assign a parent container by holding the Alt key and dragging them into the desired container. As the page width goes below the thresholds of 1200 and 600 pixels, the panel width will be assigned to a different value, using CSS3 media queries, to allow content folding. Typically, the width of the panels is doubled relative to the size of the page. For example, when the page is between 600 and 1199 pixels wide, the CSS classes set the following widths: panel-1w is 1/6 of the page width. panel-2w is 1/3 of the page width. panel-3w is 1/2 of the page width. panel-4w and larger fill the entire container. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 13

14 Introducing RDF Templates HTML pages created using the RDF Add-on can contain multiple responsive panels within a single container. This allows panels to resize and fold differently within each container. These are done using the column CSS classes. For example, placing panel1 and panel2 inside column1 causes them to stack when the screen width is too narrow to maintain rows of panels. An example of multiple responsive canvases within a single container is shown in the following image. Introducing RDF Templates The RDF Add-on comes with 26 HTML templates that are pre-configured with the RDF framework, including responsive-page.js, grid CSS, the default theme CSS, and collapsible global filter sections. These templates offer most of the layouts that are commonly used in web applications. Some of the available templates are shown in the following image. These templates can be filled with content to create responsive HTML pages. 14 WebFOCUS

15 1. Getting Started With the Responsive Design Framework Tips for Using RDF Add-on Templates Here are some of the best practices in working with the RDF Add-on templates to create responsive HTML pages: Creating Responsive Pages Since the RDF templates are dependent on styling, it may be preferable to create your HTML content in the same node in which your RDF content is saved, so that you will have access to the proper style sheets. Create your own folder so that you can save your content separate from the packaged templates folder. You can copy the templates that you want to use to this folder and rename them to suit your needs. If you want to create a dashboard with parameters, or other InfoApps, remove some of the iframes and add your controls to the appropriate panels. If you want to change the look and feel of the page, you can override the CSS classes by using inline CSS or importing your own CSS. The templates are also preconfigured with a filter section that is hidden by default. If you want to use the filter section, simply add your controls to the filter panels located at the top of the page or to the secondary filter panels located at the bottom of the page. The secondary filters open from the left as a sliding accordion panel when you click the filter button during runtime. The collapsible filter area at the top of the page will not appear at run time if no filters are placed in it. The primary filter section can be configured to collapse completely, which is the default setting, or to collapse into a breadcrumbs display showing only the active selections for each control. This is controlled by adding a JavaScript variable to the oninitialupdate function: function oninitialupdate() { filtertogglemode = crumbs ; } Adding global filters is explained in more detail in Working With Filters on page 34. 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. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 15

16 Creating Responsive Pages 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. Example: Creating a Responsive Page From an RDF Template 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 16 WebFOCUS

17 1. Getting Started With the Responsive Design Framework Using the RDF Grid 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 on page 40. 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. 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 on page 12. 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. 1. In the Environments Tree panel, under the Content node, expand the RDFTemplates folder, the Common folder, and the template folder. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 17

18 Using the RDF Grid 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. 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. 18 WebFOCUS

19 1. Getting Started With the Responsive Design Framework 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. 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%. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 19

20 Using the RDF Grid This moves the panel to the top-right of its container, as shown in the following image. 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. 20 WebFOCUS

21 1. Getting Started With the Responsive Design Framework 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. 14. Save the file. You can use the same technique to set the panel sizes and reposition the panels. The RDF Addon supports many different panel sizes. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 21

22 Using the RDF Grid 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. 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. 22 WebFOCUS

23 1. Getting Started With the Responsive Design Framework 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>. 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: a. For the Unique Identifier property value, type column1. b. For the Class identifier (CSS) property value, type column column-6w. c. For the Left property value, type 0px. d. For the Top property value, type 0px. e. Delete any text in the Width property value. f. For the Height property value, type 800px. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 23

24 Using the RDF Grid 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. 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: a. For the Unique Identifier, type column2. b. For the Class identifier (CSS) property value, type column column-6w. c. For the Left property value, type 50%. d. For the Top property value, type 0px. e. Delete any text in the Width property value. f. 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. 24 WebFOCUS

25 1. Getting Started With the Responsive Design Framework 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 column In the Properties panel, make the following changes: a. For the Unique Identifier property value, type content1-panel1. b. For the Class identifier (CSS) property value, type panel panel-6w panel-box. c. For the Left property value, type 0px. d. For the Top property value, type 0px. e. Delete any text in the Width property value. f. For the Height property value, type 340px. This creates a panel that is 340 pixels tall, located at the top of column 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: a. For the Class identifier (CSS) property value, type title-tab tab-text. b. For the Left property value, type 0px. c. For the Top property value, type 0px. d. For the Width property value, type 100%. e. For the Height property value, type 40px. f. Under Edges, for the Padding-left property value, type 15px. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 25

26 Using the RDF Grid 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. 19. On the Components tab, in the Containers group, click Panel. The pointer becomes a crosshair. 20. Draw a second panel beneath content1-panel In the Properties panel, make the following changes: a. For the Unique Identifier, type content1-panel2. b. For the Class identifier (CSS) property value, type panel panel-6w panel-box. c. For the Left property value, type 0px. d. For the Top property value, type 380px. e. Delete any text in the Width property value. f. 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: 26 WebFOCUS

27 1. Getting Started With the Responsive Design Framework a. For the Class identifier (CSS) property value, type title-tab tab-text. b. For the Left property value, type 0px. c. For the Top property value, type 0px. d. For the Width property value, type 100%. e. For the Height property value, type 40px. f. 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: a. For the Unique Identifier property value, type content1-panel3. b. For the Class identifier (CSS) property value, type panel panel-6w panel-box. c. For the Left property value, type 0px. d. For the Top property value, type 0px. e. Delete any text in the Width property value. f. For the Height property value, type 340px. This creates a panel that is 340 pixels tall, located at the top of column 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: a. For the Class identifier (CSS) property value, type title-tab tab-text. b. For the Left property value, type 0px. c. For the Top property value, type 0px. d. For the Width property value, type 100%. e. For the Height property value, type 40px. f. 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. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 27

28 Using the RDF Grid 32. Draw a fourth panel beneath content1-panel In the Properties panel, make the following changes: a. For the Unique Identifier, type content1-panel4. b. For the Class identifier (CSS) property value, type panel panel-6w panel-box. c. For the Left property value, type 0px. d. For the Top property value, type 380px. e. Delete any text in the Width property value. f. 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: a. For the Class identifier (CSS) property value, type title-tab tab-text. b. For the Left property value, type 0px. c. For the Top property value, type 0px. d. For the Width property value, type 100%. e. For the Height property value, type 40px. f. Under Edges, for the Padding-left property value, type 15px. You have now created four equally large panels with labels. 28 WebFOCUS

29 1. Getting Started With the Responsive Design Framework 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. 38. Save the HTML page and run it. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 29

30 Using the RDF Grid 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 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. 30 WebFOCUS

31 1. Getting Started With the Responsive Design Framework 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; Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 31

32 Using the RDF Grid 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. 32 WebFOCUS

33 1. Getting Started With the Responsive Design Framework 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. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 33

34 Working With Filters Working With Filters 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. The RDF Add-on includes a number of filtering features. Each template includes collapsible filters at the top of the page and a sliding accordion panel that can be shown or hidden along the left side of the page by using the filter button at the top. Additionally, the primary filter section can be configured to collapse into a breadcrumbs display showing only the active selections for each control. This is controlled by adding a JavaScript variable to the oninitialupdate function for the HTML page, as detailed in the following example. Example: Adding a Filter to an RDF Page This example shows you how to add filters to an RDF page. 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 template422.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. Add content to the frames in the top row by right-clicking the frame and clicking Reference existing procedure. The Open File dialog box opens. 34 WebFOCUS

35 1. Getting Started With the Responsive Design Framework 7. Expand the RDFTemplates folder, the doc folder, the gadget folder, and the text-gadget folder, then select the following files: metric_plus_three_sub_metrics.fex metric_trend_by_category.fex two_metric_with_sparkline_bar_chart_carousel.fex two_metric_with_sparkline_chart_carousel.fex 8. Add content to the chart frames by right-clicking the frame and clicking Reference existing procedure. The Open File dialog box opens. 9. 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 Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 35

36 Working With Filters 10. Save the HTML file and run it. The following image shows an example of the updated page. 11. Open the file again in the HTML canvas. 12. Delete the two right-most filter panels from the row above where you have added content. This leaves the two panels on the left. 13. Select the filter panel on the right. 14. In the Properties panel, make the following changes: a. For the Class identifier (CSS) property value, type panel panel-6w. b. For the Left property value, type 50% 15. Select the filter panel on the left. 16. In the Properties panel, for the Class identifier (CSS) property value, type panel panel-6w. 17. On the Controls tab, in the Controls group, click Check Box. 18. Add a check box control to the filter panel on the left. 19. In the Properties panel, make the following changes to resize the check box. 36 WebFOCUS

37 1. Getting Started With the Responsive Design Framework a. For the Left property value, type 0px b. For the Top property value, type 20px c. For the Width property value, type 100% d. For the Height property value, type 30px 20. In the Miscellaneous section of the Properties panel, type 5 in the Columns property value and select Push button from the menu for the Type property value. 21. On the Components tab, in the Generic Elements group, select Label. 22. Add a label to the panel 23. Double-click the label text and type Region. 24. In the Properties panel, make the following changes to resize the label. a. For the HtmlFor property value, type checkbox1 b. For the Left property value, type 0px c. For the Top property value, type 0px d. For the Width property value, type 100% e. For the Height property value, type 20px 25. On the Controls tab, in the Controls group, click Drop Down. 26. Add a drop down menu to the second filter panel. 27. In the Properties panel, make the following changes to resize the drop down menu. a. For the Left property value, type 0px b. For the Top property value, type 25px c. For the Width property value, type 150px d. For the Overflow property value, set it to visible 28. On the Components tab, in the Generic Elements group, select Label. 29. Add a label above the drop down control in the second filter panel. 30. Double-click the label text and type Product. 31. In the Properties panel, make the following changes to resize the label. a. For the HtmlFor property value, type combobox1 b. For the Left property value, type 0px c. For the Top property value, type 0px Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 37

38 Working With Filters d. For the Width property value, type 150px e. For the Height property value, type 20px 32. In the Parameters tab, link the checkbox1 control to the REGION parameter by dragging one on top of the other. 33. Select the checkbox1 control in the Parameters tab and open the Settings panel. a. Set the Data Type to Dynamic and Default. b. Click the ellipsis button for Data Source and select ggsales.mas. c. Click the ellipsis button for Value from to set the Value from and Display from values to REGION. d. Select the Add ALL option check box to add ALL as a filtering option. 34. Link the combobox1 control to the PRODUCT parameter. 35. Select the combobox1 control in the Parameters tab and open the Settings panel. a. Set the Data Type to Dynamic and Default. Click the ellipsis button for Data Source and select ggsales.mas, if it is not already selected. b. Click the ellipsis button for Value from to set the Value from and Display from values to PRODUCT. c. Select the Add ALL option check box to add ALL as a filtering option. 38 WebFOCUS

39 1. Getting Started With the Responsive Design Framework 36. Save the HTML file and run it. The result is shown in the following image. To filter the data, use the Region and Product filters and click the Refresh button at the top. You may not have sample data for every region/product combination. 37. Return to the HTML canvas. Open the Embedded JavaScript/CSS tab, and add the following function starting on line 11: function oninitialupdate() { } filtertogglemode = crumbs ; This function enables the filter to collapse into a breadcrumbs view that shows the active selections for each control. 38. Save the file and run it again. 39. Click the three dot icon below the filter panels to collapse the area into a breadcrumb view, as shown in the following image. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 39

40 Integrating Responsive Pages into the BI Portal These global filter options allow the creation of interactive HTML pages that can also be run in a BI Portal page. If you want to apply a global filter on your own procedures in an HTML page, make sure that they use the same data source and have the global filter fields set as dynamic parameters. Make sure that the parameters in each of the affected procedures also have the same multiselect setting. Integrating Responsive Pages into the BI Portal RDF pages can be integrated into the BI Portal to create adaptive and intuitive user-facing InfoApps. The RDF Add-on enables full access to personalization and ad hoc reporting features, among others. You can use both BI Portal-created pages and RDF pages within a single portal. This enables you to use the standard responsive dashboard capabilities of BI Portal in combination with responsive InfoApps created with the RDF Add-on. Note: It is recommended to use a single-column layout when placing RDF pages into a responsive portal to ensure that the pages maintain their original responsiveness. Procedure: How to Add RDF Pages to a BI Portal RDF pages can be a great addition to customer facing portals. This example will show how to add RDF pages to a portal. 1. In App Studio, click BI Portal from the WebFOCUS Administration menu. WebFOCUS BI Portal opens in Internet Explorer. 2. In the Resource tree, right-click the Portals node and click New Portal. The New Portal dialog box opens. 3. Type a title for the new portal and click OK. The Portal Designer opens. 4. On the Properties tab at the bottom of the screen, set the Width to auto. 5. Right-click the page and click Page Layout. The Choose a Layout menu opens. 6. Select One Column. The Choose a Layout menu closes. 40 WebFOCUS

41 1. Getting Started With the Responsive Design Framework 7. On the Insert tab, in the Containers group, click Panel. A new panel appears in the portal page. 8. On the Insert tab, in the Content group, click WebFOCUS Resources. The WebFOCUS Resources tree appears. 9. Navigate to the location of your RDF page and drag it to the panel. Note: Be sure to drop the RDF page within the panel, not above it. 10. Using the arrows in the breadcrumb trail at the bottom of the window, navigate to the container with the name of your imported file. Set the Height to auto. 11. Use the breadcrumb trail to navigate to Panel_1_1 and clear the Dynamic Report Styling check box. 12. Save the portal and close the Portal Designer. 13. In the Resource tree, under the Portals node, right-click your new portal and click Run. 14. Adjust the size of the browser window. The portal content dynamically resizes and rearranges to fit the display. Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 41

42 Integrating Responsive Pages into the BI Portal 42 WebFOCUS

43 Index B BI Portal 40 C Change management package 9 Configuration 9 Creating custom templates 17 Creating responsive pages 15 CSS classes 12 E Excel export 31 Export Excel 31 PDF 31 F Filters 34 I Import change management package 9 Installation 9 P Panel buttons 31, 32 enabling 32 Panel layout 12 Panel stacking 22 Panels 11 PDF export 31 R RDF Add-on BI Portal 40 configuration 9 contents 8 features 8 filters 34 installation 9 overview 7 reformat existing content 10 templates 14 RDF grid 17 RDF panels 11 RDF templates 14 Reformat existing content 10 Resize 31 Resize and rerun 31 Responsive web design 7 T Template tips 15 Templates 14, 16, 17 creating custom 17 creating responsive pages 16 Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio 43

44 Index 44 WebFOCUS

45 Customer Connections Where users partner with Information Builders to provide feedback and create quality documentation. Information Builders Technical Content Management team is comprised of many talented individuals who work together to design and deliver quality technical documentation products. Your feedback supports our ongoing efforts! You can also join a usability study to get an early look at new documentation products and services. Your participation helps us create documentation products that meet your needs. To send us feedback or make a customer connection, contact Michele Brady, Service Director, Technical Content Management at Michele_Brady@ibi.com. To request permission to repurpose copyrighted material, please contact Frances Gambino, Vice President, Technical Content Management at Frances_Gambino@ibi.com. To visit the Technical Content Library, go to

46 Getting Started With the Responsive Design Framework Add-on for WebFOCUS App Studio Release 8.1 Version 05 Information Builders, Inc. Two Penn Plaza New York, NY DN