Display Object Modeling

Review the prerequisites before you model a custom cockpit card.

The contractSnippets folder in your Modeler workspace contains code snippets that you can use for modeling.

Prerequisites

To model contracts in VS Code based Modeler, you must:

Connect to the Salesforce org that contains the Display object from your Visual Studio (VS) Code based Modeler and launch the simulation app.
Review the Display database table and verify that the Display table is available and the demo data is synced to the mobile database. Here’s a sample SQL Query you can run in VS Code based Modeler to review the Display database table:
```
SELECT
  NAME, DESCRIPTION__c, Competitor_Display__c, Sales_Org__c
FROM
  DISPLAY__c
```
Note
You can install an extension in VS Code to access the SQLite database. For example, SQLite Extension.
In addition to the fields defined in the MobilityRelevant field set, the table contains other standard fields, such as _syncStatus and isDeleted. The sync engine uses these fields and automatically syncs them. You can ignore these fields for this exercise.
Configure the sfConsumerKey value in the config.json file at $workspace/appl/build/config.
Ensure that you’re familiar with the component structure of Modeler objects and files.
Tip You can use a folder called contract snippets which holds some code snippets.

Add Display Module and List Object
Create the Display module and add the resources related to the Display functionality to the module, such as list object, data source, and processes.
Create the Display Cockpit Card
Add a simple empty cockpit card to the Your Day cockpit. This cockpit card forms the base card. You can model additional functionalities on this cockpit card
Define the Display Card Process
Define the process flows such as, how to load and store data, call functions and processes, and input validation within the app
Add a Counter to the Display List
Add a counter to show the number of display records that are visible on the card and the total number of display records.
Configure the Number of Visible Records in a List
Limit the number of visible list items to show and sort the items in alphabetical order on the card.
Add Expand and Collapse Settings on the Display Card
Add user interactions to the Display cockpit card. Make the Display card collapsible and store the collapsed state.
Indicate Competitor Displays
Configure the Display card to indicate competitor displays with an icon.
Configure Device Mode in Simulator App
The CG Cloud offline mobile app is supported on different models of mobile devices and tablets. In the simulator app, you can select a mobile device type and test how the CG Cloud offline mobile app renders on the device.

Did this article solve your issue?

Let us know so we can improve!