WOW User Defined Display Components

Introduction

User Defined Display Component provides end user possibility to control or define HTML or HTML 5 which WOW

will use for field rendering. WOW also includes some predefined templates for frequently used HTML5 components

like audio, charts, gauges, and video components. Click here to view a sample Application. User defined HTML fields are rendered for both display and input modes. If you desire to just apply formatting for a read only field, you should consider using a DERIVED FIELD.

How to use it

• • Create an SQL Operation as needed.

  • Create Association Operations as needed.

  • On the Field Descriptor edit page, select Display Component property (Meter, Google or HTML5).

  • Click the apply button.

  • You will see the User Defined HTML field with the HTML template of the component you just selected. You can leave as it is or you can customize HTML to anything you need:

  • in html you can use any of the WOW parameters such as:

  • ??field_name - row parameter

  • ???field_name - user parameter

  • ??!field_name - global parameter - support added in WOW version 7.1.1

  • ??!VALUE - this is the value of the current field.

??!DISPLAYVALUE - this is the display value of the current field. Useful if you have possible values applied to a field

• • some of component are more advanced, support real time updating, follow HTML comments for details.

  • After clicking the save button - field will be rendered using just defined HTML or HTML5.

TAGS: formatting, mask, customize UI, user interface

Topics

• • HTML5 Meter

    • setting up the Parent Operation.

    • setting up the Field Descriptor.

    • setting up the Association Operation.

  • HTML5 Progress Bar

    • setting up the Parent Operation.

    • setting up the Field Descriptor.

    • setting up the Association Operation.

  • HTML5 Gauge

    • setting up the Parent Operation.

    • setting up the Field Descriptor.

    • setting up the Association Operation.

  • HTML5 Gauge Test

    • setting up the Parent Operation.

    • setting up the Field Descriptor.

  • QR Code

    • setting up the Operation.

    • setting up the Field Descriptor.

    • setting up the Association Operation.

    • Requires WOW QR Code Add-On Product

• Currency Formatters

• Multiple value selects

User defined display components with Associations (Required WOW PRO or Enterprise)

Video explanation: https://www.screencast.com/t/xq1yJ74YC

To add associations to a user defined display component follow these steps:

1. Create a single hidden variable which will be used to store the association value. In this example, we put the following HTML

into the operations instructions.

<input type="hidden" id="empnoFromRequest" name="empnoFromRequest" value="" />

2. In the user defined html component of the FD, insert code:

<BUTTON type=button onclick=" document.getElementById('empnoFromRequest').value = '??EMPNO'; runWOWOperation(2590);"> Run association </button>

Make sure you match the hidden variable "empnoFromRequest" and also change ??EMPNO to the rows field value you intend to use for the association. runWOWOperation will execute the association with an id of 2590. Replace 2590 with the id of the association you want to run.

3. In your association, reference the request variable created and set in 1 and 2 above.

SELECT EMPNO as EmployeeNum, FIRSTNME, LASTNAME, SALARY FROM PJUSER70.SAMPLE_EMPLOYEE where empno = ??:empnoFromRequest

??: indicates to use a request parameter to get the value.