Can we display and modify existing records?
Create models with Business Object data sources for triPeople records, display existing data using paper-input elements bound to data fields, and modify records by triggering synchronous workflows through action groups with paper-button interactions.
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
We'll add the fields to the data source by using Quick Add.
b1. Data Source Fields
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
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=14248555 in its
related URL. Enter your specific specId as the Instance ID
for your application.
Application Metadata
Next, after you've prepared your model and view connections, open the command prompt in your
selected folder, run the tri-template command if needed, and run the
tri-proxy command to preview your changes. In our example, we'll run
tri-template with starter-v3 and
jay-ux-people-view to add a new JS view file. Then we'll run
tri-proxy with
http://beta.tririga-dev.com/p/web/jayUXPeopleApp. (At any time, you can also
run tri-deploy to push your updated view file to the server.)
e. NPM > tri-template and tri-proxy
If needed, add the import line at the beginning of your JS file 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 import line at the start to import the Polymer element:
import "../@polymer/paper-input/paper-input.js";
f. JS File > Import paper-input
Next, add the <paper-input> tags to declare the Polymer elements:
<paper-input label="First Name" floating-label
value="{{data.triFirstNameTX}}"></paper-input>
<paper-input label="Last Name" floating-label
value="{{data.triLastNameTX}}"></paper-input>
g. JS File > Declare paper-input
Save the file and return to 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
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
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
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
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 tri-proxy command is running in the
command prompt. (At any time, you can also run tri-deploy to push your updated
view file to the server.)
First, add the import line at the start to import the Polymer element:
import "../@polymer/paper-button/paper-button.js";
l. JS File > Import paper-button
Next, add the <paper-input> tag to declare the Polymer element:
<paper-input label="Nick Name" floating-label
value="{{data.triNickNameTX}}"></paper-input>
Then, add the <paper-button> tag to declare it and call a JavaScript method
_update when the button is tapped: <paper-button raised
on-tap="_update">Trigger now!</paper-button>
m. JS File > Declare paper-input and paper-button
Then, insert the JavaScript method _update with your specific
specId.
n. JS File > Insert _update
Save the file and return to the UX view. Click the Trigger now! button. Do you see your modified instance data? Pretty nice!
o. UX App > Input with No Nick Name
p. UX App > Input with Modified Nick Name
