Oracle by Example brandingAdding Gauges in Oracle Visual Builder Cloud Service

section 0Before You Begin

This 10 minute tutorial is the last in the Visualizing Data module.

Background

Oracle Visual Builder Cloud Service is a visual development tool for creating web and mobile applications by simply dragging and dropping UI components onto a page. You don't need any programming experience to develop an application.

In this tutorial, you will add and configure gauges that show sales as a percent of the sales objectives.

The images in this tutorial sequence show the standalone version of Oracle Visual Builder Cloud Service. If you are using the Oracle Integration Cloud version, you will see an additional menu at the top of each page that lets you switch between Visual Builder and Integration Cloud.

Top menu
Description of the illustration vbcs_oic_menu.png

What Do You Need?

  • Access to Oracle Visual Builder Cloud Service
  • A supported browser (see Known Issues for Oracle Visual Builder Cloud Service for more information)

section 1Add a Gauge

Now you will add a gauge. A gauge visually represents a single value.

  1. Open the page menu, and select the Sales Objectives page.
  2. Drag and drop a List View on the Sales Objectives canvas. List Views can be found in the Collection section of the Components palette.
    Add list view
    Description of the illustration vbcs_s1_1_list.png
  3. In the Data page of the List Creation wizard, select Summary.
    Add list view
    Description of the illustration vbcs_s1_2_listwizard_p1.png
  4. In the Layout page of the List Creation Wizard, select the Four Column layout, then click Next.
    Select four column list
    Description of the illustration vbcs_s1_3_listwizard_p2.png
  5. In the Mapping page, drag and drop Year on the first column of the list. Select Output Text from the component dialog.
    Add field to list
    Description of the illustration vbcs_s1_4_listwizard_p3.png
  6. Drag and drop Region in the second column.
  7. Drag and drop Sales in the third column and select Output Currency from the component dialog. The fourth column is now on the next line, but you'll fix that soon. Click OK.
  8. In the Object Actions page, click Off for all default actions and click OK.
    Set default actions to off
    Description of the illustration vbcs_s1_5_listwizard_p4.png
  9. In the Options page of the Table Creation wizard, click Finish.No additional action is required in the Options page.
  10. Select the Year text field and click the Properties tab. Set the Label Position to None.
    Label position
    Description of the illustration vbcs_s1_6_label_position.png
    Set the Region field and the Sales field to None in the same way. The fourth column is back on the first line now.

section 2Add a Second Gauge

  1. Drag a Circular Status Meter from the Gauge section of the Components palette to the fourth column of the Sales Objective list.
    Add gauge
    Description of the illustration vbcs_s2_1_add_gauge.png
  2. In the pop-up box, select or enter the following details:
    • Business Object: Summary (selected by default)
    • Value: Sales
    • Minimum Value: 0
    • Maximum Value: 16000
    Summary business object dialog
    Description of the illustration vbcs_s2_2_gauge_popup.png
    Click the OK icon to create the field.
  3. In the Property Inspector, set the Label Position to None.
    Gauge label
    Description of the illustration vbcs_s2_3_gauge_label.png
  4. Set the Value Label to %.
    Gauge value label
    Description of the illustration vbcs_s2_4_gauge_value.png

section 3Configure Thresholds for the Second Gauge

  1. On the Data page, click Plus icon to add a threshold. Thresholds are used to control the color of a gauge. As long as the value of the gauge's data is below a threshold, it will display the color selected for that threshold.For Threshold 1, enter a value of 15000, and select Orange for the color.
    Configure threshold
    Description of the illustration vbcs_s3_1_threshold1.png
  2. In the same way, add two more thresholds. Configure Threshold 2 with a value of 16000 and the color Green. Configure Threshold 3 with a value of 50000 and the color Blue.
  3. The gauges visually represent each region's sales for a given year. Gauges that are orange show sales that fall below 94% of target. Green gauges indicate sales that are above this threshold, or that have met the sales objective. Blue gauges show results that have exceeded the sales objective.
    Sales objectives
    Description of the illustration vbcs_s3_2_gauges_configured.png

more informationWant to Learn More?