Create a UIPluginV2

<UIPluginV2 name="MyNewV2Plugin">
  <Interface>
    <Property id="propertyId" />
    <List id="listId">
      <Property id="ListPropertyId" />
    </List>
    <Events>
      <Event name="eventName" />
    </Events>
  </Interface>
<!-- Define the labels to be used in the js code of the UIPlugin -->
  <Labels>
    <Label id="NewUIPlugin_Data1" />
    <Label id="NewUIPlugin_Data2" />
  </Labels>
  <Libraries>
    <Library name="C3JS" />
    <Library name="D3JS" />
  </Libraries>
..<UIComponentHTML name="SampleComponentHTML"><![CDATA[
    <div> 
      <div id="chartArea_SampleChart" > </div>
    </div>
    ]]>
  </UIComponentHTML>
  <UIComponentCSS name="SampleComponentCSS" ><![CDATA[
    ]]>
  </UIComponentCSS>
  <UIComponentJS name="SampleComponentJS" ><![CDATA[
    function connectCallback() {var chart = c3.generate({ bindto: '#chartArea_SampleChart', data: { columns: [ [PluginManager.locale.labels.NewUIPlugin_Data1, 30, 200, 100, 400, 150, 250], [PluginManager.locale.labels.NewUIPlugin_Data2, 50, 20, 0, 40, 15, 25] ] } });}
    ]]>
  </UIComponentJS>
</UIPluginV2>

The supported sub tags for a contract structure are:

Interface (Mandatory)

Note The sequence of sub tags must be in this order.

Property (Optional)

To declare binding targets to use in the user interface contract while initializing the UIPluginV2.

List (Optional)

To declare binding targets to use in the user interface contract while instantiating the UIPluginV2.

Events (Optional)

To declare event names to use in the JavaScript code defined in <UIComponentJS> tag and in user interface contract for CustomPluginEvent names.

Labels (Optional)

To define the required labels in the UIPluginV2 contract by using the PluginManager.locale.labels.#labelid# syntax in the JS Code. Use the Localization class to resolve the label ID to the localized text according to the current locale.

Libraries (Mandatory)

To specify the external file contracts that can be loaded and passed to the UIPluginV2. The system matches the external files using the name attribute.

Note We recommend minimizing the use of libraries as it has runtime and memory implications.

UIComponentHTML (Mandatory)

Note name attribute is mandatory

To provide static HTML in the CDATA block. This component defines the body of the HTML file loaded in the iFrame.

UIComponentCSS (Mandatory)

Note name attribute is mandatory

To provide CSS in the CDATA block. This component gets loaded in a <style> tag of html file in the iFrame.

UIComponentJS (Mandatory)

Note name attribute is mandatory

To provide JavaScript code in the CDATA block to make the UIPlugin dynamic. This component gets loaded in the <script> tag of HTML file in the iFrame.

Utils Class

Here are the various sets of functions in this class:

• Functions to add helpers to the PluginManager. For example:

  UI Plugin Code Property	UIPluginV2 Property
  Utils.isDefined()	PluginManager.helpers.isDefined()
  Utils.createDateToday()	PluginManager.helpers.createDateToday()
  Utils.createDateNow()	PluginManager.helpers.createDateNow()

• Functions to populate device information when loading the UIPlugin. The values are found in the deviceInfo object of the PluginManager. For example:

  UI Plugin Code Property	UIPluginV2 Property
  Utils.isAndroid	PluginManager.deviceInfo.isAndroid
  Utils.isApple	PluginManager.deviceInfo.isApple
  Utils.isWindows	PluginManager.deviceInfo.isWindows
  Utils.isPhone	PluginManager.deviceInfo.isPhone

Complex functions that use or need third-party libraries aren’t available in PluginManager. Use the complex methods in the business logic when preparing the data for UIPlugin.

Localization Format

The localization formats from the locale contracts are available in PluginManager.locale.formats in the UIPlugin. Use the Format properties to customize the number or date format.

Use these properties to localize the number and date format for a specific locale. To enhance the properties, specify additional properties in the locales.

Note Make sure that new properties are defined for each locale that’s in use.

• DateFormats

  UI Plugin Code Property	UIPluginV2 Property
  Date	PluginManager.locale.formats.DateFormats.Date
  DateTime	PluginManager.locale.formats.DateFormats.DateTime
  Time	PluginManager.locale.formats.DateFormats.Time

• NumberFormats

  UI Plugin Code Property	UIPluginV2 Property
  DecimalSeparator	PluginManager.locale.formats.NumberFormats.DecimalSeparator
  ThousandSeparator	PluginManager.locale.formats.NumberFormats.ThousandSeparator

UIPluginV2 in a UIDescription Contract

Here's the structure of a UIDescription containing a UIPluginV2 contract:

<UIDescription name="FWUIPluginV2::ShowPluginUI" schemaVersion="0.0.0.5">
  <Page pagePattern="SingleSectionPage">
    <PageHeader>
<Bindings>
        <Resource target="title" type="Label" id="TitleId" defaultLabel="UIPluginV2" bindingMode="ONE_TIME" />
      </Bindings>
    </PageHeader>
    <Section sectionName="masterSection" sectionPattern="SingleAreaSection">
      <Area areaName="mainArea" areaPattern="SingleElementArea">
        <UIPluginV2 name="MyNewUIPluginV2" uiPlugin="MyTestUIPluginV2">
          <Bindings>
            <Binding target="Title" type="Text" id="propertyId" binding="ProcessContext::testPlugin.title" bindingMode="TWO_WAY" />
            <List target="listTarget" dataSource="ProcessContext::ListData.Items[]">
              <Binding target="ListPropertyId" type="Text" binding=".b1" />
            </List>
          </Bindings>
        </UIPluginV2>
      </Area>
    </Section>
  </Page>
</UIDescription>

The supported subtags for a UIDescription contract are:

• Bindings (optional): To declare binding targets, which are defined in UIPlugin's Interface properties.
• Events (optional)