Extending UX: UX Lesson 3


III. Extending UX: UX Lesson 3

UX Lesson 3: Can we modify records?

20160716a

  • 1 Extending UX
  • 2 Data Source: This time, we’ll modify a record by triggering a workflow. We’ll continue to use a BO data source. But in our example, we’ll pull data from the People BO. So, in the Model Designer, prepare your model with a data source that contains the fields for First Name and Last Name.
  • 3 Data Source Fields: Like before, go to the Fields section of your data source, and select Quick Add. Enter the name, exposed name, and field name of each data source field. Make sure that the field name matches the field in your BO. Likewise, prepare any other metadata connections.
  • 4 Instance ID: Since we want to pull data from an existing People record, prepare your application metadata with an Instance ID that represents the specId of that record. To be clear, the specId appears in the URL of the People record. Enter this specId as the Instance ID.
  • 5 Sync Process: Next, let’s start the sync process. In your command prompt, run the addview command if you need to add a new HTML file, then run the sync command to sync your changes. If needed, add the <link> tag to import triplat-ds, and add the <triplat-ds> tag to declare it.
  • 6 Polymer Fields: Now let’s add some Polymer fields to grab the First Name and Last Name data from the People record. Add the <link> tag to import the paper-input element. And add the <paper-input> tag to declare it, which displays the data-source field as a nice single-line text field.
  • 7 Refresh View: Save the HTML file and refresh the view. Do you see your text fields? If you do, do you also see the First Name and Last Name data from the People record? Pretty nice!
  • 8 Prepare Workflow: Next, let’s modify the Nick Name. Prepare a Synchronous workflow with Permanent data, the People module, and the People BO. Add a Modify Records task that will map to and from the People BO. Edit the map to modify the Nick Name to a new value. Then publish the workflow.
  • 9 Data Source Fields: Return to your data source that contains the fields for First Name and Last Name. This time, add the data-source field for Nick Name.
  • 10 Data Source Action: In this same data source, add an action group, and an action with the WORKFLOW action type, the People module, the People BO, and the name of the workflow that you defined earlier. This hooks up your workflow into your data source. Finally, Save & Close your action, action group, and data source.
  • 11 Polymer Button: Now let’s add one more Polymer field to grab the Nick Name data from the People record, and add a Polymer button to trigger the workflow that modifies the Nick Name to the new value. Like before, make sure that the sync command is still running.
  • 12 JavaScript Method: Since you already imported the paper-input element, add the <link> tag to import the paper-button element. Add one more <paper-input> tag to declare it. And add the <paper-button> tag to declare it and also call a JavaScript method when the button is tapped. Then, add the JavaScript method inside the existing <script> tag.
  • 13 Refresh View: Save the HTML file and refresh the view. Do you see your button? If you do, feel free to click it and refresh again. Do you see your modified Nick Name data? What do you think?
  • Quiz Question 1
  • Quiz Question 2

UX Lesson 4: Continue reading →

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s