You are here:
UIPluginV2 Controls
Three framework-based UI controls are available, which are supported in the UI contract both through snippets and standard auto-completion in the XML editor for the UI contract. The CardNoDataMessageUiPlugin, UserWelcomeCardUiPlugin, and VisitDetailsUiPluginneeds UIPlugins are auto-migrated. For any other existing UIPlugins, create a UIPluginV2.
Required Editions
| Available in: Enterprise, Performance, and Unlimited Editions that have Consumer Goods Cloud enabled |
The controls that replace the UIPlugins are:
- NoDataMessage: Replacement for CardNoDataMessageUiPlugin
- VisitDetails: Replacement for VisitDetailsUiPlugin
- UserWelcome: Replacement for UserWelcomeCardUiPlugin
NoDataMessage Component
<NoDataMessage name="#componentName#">
<Bindings>
<!-- mandatory bindings -->
<Resource target="infoIcon" type="Image" id="#infoIcon#" />
<Binding target="maintext" type="Text" binding="#maintext#" bindingMode="ONE_WAY" />
<!-- optional bindings -->
<Binding target="subtext" type="Text" binding="#subtext#" bindingMode="ONE_WAY" />
</Bindings>
</NoDataMessage>VisitDetails Component
<VisitDetails name="#componentName#">
<Bindings>
<!-- mandatory bindings -->
<Binding target="visitStatus" type="Text" binding="#visitStatus#" bindingMode="ONE_WAY" />
<Binding target="visitPriority" type="Text" binding="#visitPriority#" bindingMode="ONE_WAY" />
<Binding target="visitDate" type="DomDate" binding="#visitDate#" bindingMode="ONE_WAY" />
<Binding target="plannedStartTime" type="DomTime" binding="#plannedStartTime#" bindingMode="ONE_WAY" />
<Binding target="plannedEndTime" type="DomTime" binding="#plannedEndTime#" bindingMode="ONE_WAY" />
<Binding target="actualStartDate" type="DomDate" binding="#actualStartDate#" bindingMode="ONE_WAY" />
<Binding target="actualStartTime" type="DomTime" binding="#actualStartTime#" bindingMode="ONE_WAY" />
<Binding target="actualEndDate" type="DomDate" binding="#actualEndDate#" bindingMode="ONE_WAY" />
<Binding target="actualEndTime" type="DomTime" binding="#actualEndTime#" bindingMode="ONE_WAY" />
<Binding target="Duration" type="Text" binding="#Duration#" bindingMode="ONE_WAY" />
<Resource target="visitStatusLabel" type="Label" id="#visitStatusLabel#" defaultLabel="Status" />
<Resource target="visitPriorityLabel" type="Label" id="#visitPriorityLabel#" defaultLabel="Priority" />
<Resource target="visitDateLabel" type="Label" id="#visitDateLabel#" defaultLabel="Visit Date" />
<Resource target="plannedTimeLabel" type="Label" id="#plannedTimeLabel#" defaultLabel="Planned Time" />
<Resource target="actualTimeLabel" type="Label" id="#actualTimeLabel#" defaultLabel="Actual Time" />
<Resource target="durationLabel" type="Label" id="#durationLabel#" defaultLabel="Duration Effective" />
</Bindings>
</VisitDetails>UserWelcome Component
<UserWelcome name="#componentName#">
<Bindings>
<!-- mandatory bindings -->
<Binding target="userImage" type="Blob" binding="#userImage#" bindingMode="ONE_WAY" />
<Binding target="userName" type="Text" binding="#userName#" bindingMode="ONE_WAY" />
<Resource target="userMessage" type="Label" id="#userMessage#" defaultLabel="#userMessageDefault#" />
<Resource target="userDefaultImage" type="Image" id="#userDefaultImage#" />
<Binding target="selectedDate" type="Text" binding="#selectedDate#" bindingMode="ONE_WAY" />
<Resource target="previousDayIcon" type="Image" id="#previousDayIcon#" defaultImage="ChevronLeft" />
<Resource target="nextDayIcon" type="Image" id="#nextDayIcon#" defaultImage="ChevronRight" />
<Resource target="previousDayOnTouchIcon" type="Image" id="#previousDayOnTouchIcon#" defaultImage="ChevronLeftPressed" />
<Resource target="nextDayOnTouchIcon" type="Image" id="#nextDayOnTouchIcon#" defaultImage="ChevronRightPressed" />
<Resource target="todayIcon" type="Image" id="#todayIcon#" defaultImage="TodayIcon" />
<Resource target="todayLabel" type="Label" id="#todayLabel#" defaultLabel="Today" />
<!-- optional bindings -->
<Resource target="label1" type="Label" id="#label1#" defaultLabel="#label1Default#" />
<Binding target="value1" type="Text" binding="#value1#" bindingMode="ONE_WAY" />
<Resource target="label2" type="Label" id="#label2#" defaultLabel="#label2Default#" />
<Binding target="value2" type="Text" binding="#value2#" bindingMode="ONE_WAY" />
<Resource target="label3" type="Label" id="#label3#" defaultLabel="#label3Default#" />
<Binding target="value3" type="Text" binding="#value3#" bindingMode="ONE_WAY" />
<Binding target="isTourUser" type="Bool" binding="#isTourUser#" bindingMode="ONE_WAY" />
</Bindings>
</UserWelcome>
Snippets are available for each UIPluginV2, which automatically proposes the Bindings and Events as defined in the Interface section of the UIPluginV2 contract. The following auto-completions are available for UIPluginV2 in UI contracts:
- UIPluginV2 subnode in Areas and CardContainers
- Attributes and Subnodes inside the UIPluginV2 element
In addition to the snippet-based auto-completion, basic tag and attribute-based auto-completion is also available. Dynamic snippets are available for the UIPluginV2 contracts that are built based on their interface definition. Here’s a UIPluginV2 control dynamic snippet.
<UIPluginV2 name="#componentName#" uiPlugin="TestUiPluginV2">
<Bindings>
<!--All Targets can be specified as Binding or Resource Nodes <Binding target="key" binding="" type=""/> <Resource target="key" id="" type="" defaultLabel=""/>-->
<Binding target="id" binding="#idPropertyBinding#" type="Text" />
<Binding target="text" binding="#textPropertyBinding#" type="Text" />
<List target="items" dataSource="#itemsListDatasource#">
<Binding target="name" binding="#nameListPropertyBinding#" type="Text" />
<Binding target="value" binding="#valueListPropertyBinding#" type="Text" />
</List>
</Bindings>
<Events>
<CustomPluginEvent name="onTextChange" event="#onTextChangeHandler#" />
</Events>
</UIPluginV2>Did this article solve your issue?
Let us know so we can improve!
