Extending UX: UX Lesson 1


III. Extending UX: UX Lesson 1

UX Lesson 1: Can we add other field types?

20160708a

  • 1 Extending UX
  • 2 Field Types: Are you ready for more? At this point, you should have a better idea of the UX app building process. This time, we’ll add some more field types. Such as a text-area field, number field, and Boolean button.
  • 3 Data Source: In our example, we’ll continue to use a BO data source. So make sure that your BO contains a text field, number field, and Boolean field. Then in the Model Designer, prepare your model with a data source that contains the same 3 types of data-source fields.
  • 4 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.
  • 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 Text Area Field: Now let’s add a Polymer text-area field. Add the <link> tag to import paper-textarea. And add the <paper-textarea> tag to declare it, which displays the data-source field as a nice multi-line text field.
  • 7 Refresh View: Save the HTML file and refresh the view. Do you see your text field? If you do, feel free to type a few lines on your own. Notice how the field expands automatically?
  • 8 Number Field: Next, let’s add a Polymer number field. Add the <link> tag to import paper-input. And add the <paper-input> tag to declare it, which displays the data-source field as a nice single-line text field. Since we’re using a data-source field with a number type, you can also use the auto-validate and pattern attributes to set the expected decimal format.
  • 9 Refresh View: Save the HTML file and refresh the view. Do you see your number field? If you do, feel free to type a few numbers. Notice how the error message appears when needed?
  • 10 Boolean Button: Finally, let’s add a Polymer Boolean button. Add the <link> tag to import paper-checkbox. And add the <paper-checkbox> tag to declare it, which displays the data-source field as a nice check box.
  • 11 Refresh View: Save the HTML file and refresh the view. Do you see your Boolean button? If you do, feel free to add a couple more <paper-checkbox> tags on your own. So, what do you think?
  • Quiz Question 1
  • Quiz Question 2

UX Lesson 2: 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