Can we display and modify existing records?

Create models with Business Object data sources for triPeople records, display existing data using paper-input elements in HTML files bound to data fields, and modify records by triggering synchronous workflows through action groups with paper-button tap handlers.

Yes, we can! For our next exercise, prepare your model with a data source that (1) has the BUSINESS_OBJECT data source type, triPeople module, and triPeople business object, and that (2) contains the following fields: triFirstNameTX (First Name) and triLastNameTX (Last Name).

In our example, we'll name the model jayUXPeopleModel and name the data source jayUXPeopleDataSource.

a1. Data Source Metadata

Example of displaying and modifying existing records

We'll add the fields to the data source by using Quick Add.

b1. Data Source Fields

Example of displaying and modifying existing records

Similarly, we'll name the view jayUXPeopleView (and jay-ux-people-view), name the model-and-view jayUXPeopleModelAndView, and name the application jayUXPeopleApp with the label Jay UX People Application.

Model and View Metadata

Example of displaying and modifying existing records

Since we want to pull data from an existing people record, prepare your application with an Instance ID that represents the specId of that record. To be clear, this ID isn't the ID that appears in the people form, it's the specId that appears in the URL of the people record. For example, a people record with an ID of 1000001 might have a specId=127333408 in its related URL. Enter this specId as the Instance ID for your application.

Application Metadata

Example of displaying and modifying existing records

Next, after you've prepared your model and view connections, open the command prompt in your selected folder, run the addview command if needed, and run the sync command to sync your changes. In our example, we'll run addview with jay-ux-people-view to add a new HTML view file.

e. WebViewSync > Add View and Sync

Example of displaying and modifying existing records

If needed, add the <link> tag to import the Maximo® Real Estate and Facilities triplat-ds (data source) component and add the <triplat-ds> tag to declare it.

Display data from an existing record

This time, we'll add more Polymer <paper-input> tags to grab the instance data triFirstNameTX and triLastNameTX from the existing people record.

First, add the <link> tag at the start to import the Polymer element: <link rel="import" href="../paper-input/paper-input.html">

f. HTML File > Import paper-input

Example of displaying data from an existing record

Next, add the <paper-input> tags to declare the Polymer elements:

<paper-input ... value="{{data.triFirstNameTX}}"></paper-input>

<paper-input ... value="{{data.triLastNameTX}}"></paper-input>

g. HTML File > Declare paper-input

Example of displaying data from an existing record

Save the file and refresh the UX view. Do you see your fields? Do you see the corresponding instance data from your people record? Nice, huh?

h. UX App > Input with Instance Data

Example of displaying data from an existing record

Modify data by triggering a workflow

For our next exercise, prepare a workflow with Synchronous concurrence, Permanent data, the triPeople module, and the triPeople business object. Add a Modify Records task that will map to and from the triPeople business object. Edit the map to modify the triNickNameTX (Nick Name).

In our example, we'll name the workflow jayUX - Save - Perm and modify the triNickNameTX to Jayman. Then Publish the workflow.

Workflow > Modify Records Task

Example of modifying data by triggering a workflow

Next, return to your data source from the last exercise, and (1) add the field triNickNameTX. Then, (2) add an action group, and (3) add an action that has the WORKFLOW action type, triPeople module, triPeople business object, and workflow name that you defined earlier.

j. Data Source Action Group Metadata

Example of modifying data by triggering a workflow

In our example, we'll name the action group jayUXPeopleActionGroup, name the action jayUXPeopleActionSavePerm, and name the workflow jayUX - Save - Perm. This hooks up your workflow into your data source. Finally, Save & Close your action, action group, and data source.

k. Data Source Action Metadata

Example of modifying data by triggering a workflow

This time, we'll add one more Polymer <paper-input> tag to hold the instance data triNickNameTX and Polymer <paper-button> tag to trigger a workflow that modifies the triNickNameTX from null to Jayman. Like before, make sure the sync command is running in the command prompt.

First, add the <link> tag to import the Polymer element: <link rel="import" href="../paper-button/paper-button.html">

l. HTML File > Import paper-button

Example of modifying data by triggering a workflow

Next, add the <paper-input> tag to declare the Polymer element: <paper-input ... value="{{data.triNickNameTX}}"></paper-input>

Then, add the <paper-button> tag to declare it and call a JavaScript method updateActionHandler when the button is tapped: <paper-button raised on-tap="updateActionHandler">Trigger now!</paper-button>

m. HTML File > Declare paper-input and paper-button

Example of modifying data by triggering a workflow

Insert the JavaScript method updateActionHandler within the <script> tag.

n. HTML File > Insert updateActionHandler

Example of modifying data by triggering a workflow

Save the file and refresh the UX view. Click the Trigger now! button and refresh again. Do you see your modified instance data? Pretty nice!

o. UX App > Input with No Nick Name

Example of modifying data by triggering a workflow

p. UX App > Input with Modified Nick Name

Example of modifying data by triggering a workflow