Editing Areas of Functionality Using the View Tabs

In this section:

You can use the view tabs to edit different areas of functionality for the same document. These tabs show information that would be inaccessible from any other view tab.

Designing the Layout of a Page Using the Design View Tab

The Design View tab is accessible when you are creating an HTML page or document. From here, you can design the layout of your page by adding controls and components to the canvas. This is tab is selected by default when you are creating an HTML page or document.

Creating and Modifying Parameter Values Using the Parameters View Tab

The Parameters View tab is accessible when you are creating an HTML page or In-Document Analytic dashboard. From here, you can create and modify parameter values, input controls, and customize parameter conditions. You can also bind parameters to controls and chain controls to one another.

The Parameters tab consists of the following components:

Creating JavaScript and Cascading Style Sheets Using the JavaScript and CSS View Tabs

How to:

The Embedded JavaScript and Embedded CSS View tabs are accessible when you are creating an HTML page. From here, you can create JavaScript code and cascading style sheets (CSS) for use in your HTML page. You can reference existing cascading style sheet files and JavaScript files by typing the URL in the URL/Find File area of the Settings panel. You can also search for these files by using the CSS or JavaScript commands.

Embedded code is used only in the host HTML file. External code is available to be used by multiple files.

Procedure: How to Customize Titles Using jQuery Tooltips

The following procedure describes how to customize titles, using jQuery and Internal CSS.

  1. Create an HTML page.
  2. Add a component or control to the page.
  3. Navigate to the Properties panel.
  4. Type a value for the Title property, under the Core attributes section.
  5. Click the canvas to select the DOCUMENT object.
  6. On the Properties panel, click the lightning bolt icon on the toolbar to show the events.
  7. For the Load event, click the column on the right to display the ellipsis button, as shown in the following image.
  8. Select the Embedded JavaScript view tab on the HTML canvas.
  9. After the comment lines, add a new line, and type the following code, as shown in the following image.
    $(document).tooltip();
  10. Navigate to the Embedded CSS tab, as shown in the following image.
  11. Enter a new line after the first class definition and type the following as the new class name.
    .ui-tooltip
  12. Add the following CSS Styles, as shown in the following image.
    • Color: white;
    • Font-size: small;
    • Background: black;
    • Border-radius: 20px;

    Note: You can add any styling that you want.

  13. Save and run the HTML page. You can hover the mouse over objects to show the styled tooltips.