App Studio > Navigating in > Editing Areas of Functionality Using the View Tabs

Editing Areas of Functionality Using the View Tabs

Topics:

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 active 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:

  • Input control objects.

    You may select the input control object to view and edit the Properties and settings of the control.

    • Creating an input control from the Design view prompts you to create a bound parameter on the Parameters tab.
    • Editing an input control, which is inserted when setting input controls for new parameters.
  • Add new parameters.

    Right-click anywhere on the Parameters tab to add a new parameter.

    Note: Manually adding a parameter creates an unbound parameter.

  • Refresh unresolved parameters.

    All parameters on the parameters tab are parsed every two minutes to check if any are unresolved. If there are any unresolved parameters, their surrounding polygon is colored red. If you want to check for unresolved parameters on demand, right-click and select Refresh unresolved.

  • Binding controls and parameters.

    Input controls and parameters can be bound and unbound from the Parameters tab.

    You may bind a parameter to an input control, or bind an input control to a parameter.

    • Binding a parameter to a control makes it an incoming parameter that will populate the control. Drag a parameter object to a control object on the Parameters tab.
    • Binding a control to a parameter will populate the parameter. Drag a control object to a parameter object on the Parameters tab.
  • Chain one control to another.

    Chaining will populate controls based on the selected value from the prior control in the chain. You can chain static and dynamic controls, link or unlink parts of a chain, and create conditions on links in a chain. Chains are represented by lines connecting control objects on the Parameters tab. By clicking the arrow head in a link of a chain, the Properties and settings dialog box enables you to modify and set properties and conditions of the chain.

    Note: Chaining is applicable only for controls, not parameters.

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.

WebFOCUS

Feedback