UI Contract

A UI contract describes the UI in different design layers, and each layer is defined by a UI pattern. A UI pattern describes the recurring features, layouts, and controller structures, such as adding sections to a page. Add features and UI controls like calendar, images, and tables to a section or area. Use a UI contract to customize the appearance and features of an application page. Define layouts, fields, menus items, and their data sources.

A UI contract is called by a View action in a corresponding process contract. Both the UI contract and the process contract that calls it are stored in the same folder in the Modeler.

To add a UI contract to a new or existing module, run the sf modeler add workspace CLI command in your Modeler workspace. Make sure a valid process contract exists in the module before you run the command.

Here’s a sample snippet of the UI contract.

<UIDescription name="Application::OverviewUI" schemaVersion="0.0.0.5" xmlns="UISchema.xsd" simpleEditorOnly="true">
    <!-- UIDescription element definition-->
     <Page>
       <!-- Page element definition-->
	<PageHeader>
  	  <!-- PageHeader  element definition-->
   		<Section>
		    <!-- Section element definition-->
     		<Area >
		    <!-- Area element definition-->
          			 <GroupElement name="name">
         				<InputArea name="Coordinates" disabled="true">
 			   	<!-- UIControl element definition-->
        			</GroupElement>
</Area >
</Section>
</PageHeader>
      </Page>
</UIDescription>

• UIDescription
  UIDescription contains all the elements that make up the UI contract and the meta information about the contract. The UIDescription element can contain the Page sub-element.
• Edit and Access Rights
  The call attribute in permission bindings for buttons and tabs determines the editability or visibility of the menu item or tab.
• Page
  The Page element defines the layout of the UI Contract. A page can cover multiple display screens, depending on the device type and device orientation.
• Section Control
  The Section element defines a generic section that encapsulates smaller logical units than pages and contains one or more areas. A section should never split across multiple display screens at run time. A section can cover a portion of a display screen or all of it.
• Area
  An area is a part of a section and describes a genetic area in the User interface. Areas contain one or more UI controls. You can use different area patterns to further define the layout of a section.
• UI Controls
  A UI control is any interface component displayed to the user that includes a range from simple labels to complex map or camera controls. UI controls define related elements such as touch events for buttons or text change events for text fields.
• Bindings
  The Bindings element defines a container element that contains all resource and binding data for UI controls. It has no attributes.
• Use UIPluginV2
  A UIPluginV2 is an XML file that contains configurations for HTML, CSS, and JavaScript. You can create a single UIPluginV2 control element within a single occurrence of the Area or Card element. Use the UIPluginV2 control element in UI contracts for customizations, such as display images and text in the Consumer Goods Cloud Offline Mobile App. For example, you can place your logo in the app. However, we recommend that you use UIPluginV2 only if none of the core elements fit your need. Using UIPlugin impacts the runtime and memory because UIPlugin is an iFrame.