III. Extending UX: UX Lesson 4
UX Lesson 4: Can we customize components?
- 1 Extending UX
- 2 Custom Components: Are you ready for more? This time, we’ll customize our own reusable HTML component. We’ll continue to use the same People BO, model, and view from the previous example. But in this example, we’ll add our own custom component to the view.
- 3 HTML File: Prepare a new HTML file in the same folder as your existing HTML file. But wait, don’t move it into the same folder yet! First, edit the new file in a different folder to begin with the simplest running design. This new file will start your custom component. Feel free to rename the file, but don’t forget to include a dash. Your HTML should look something like this.
- 4 Sync Process: After you prepare the HTML file, return to your command prompt, then run the sync command to sync your changes. Now you’re ready to move your new HTML file into the same folder as your existing HTML file. Go ahead and move the file. Notice how the WebViewSync tool detects and pushes your new file into your environment.
- 5 Custom Tag: Now let’s add a custom tag to the existing HTML file, so it can grab your new custom component. Add the <link> tag to import the custom component. And add the custom tag to declare that custom component.
- 6 Refresh View: Save the HTML file and refresh the view. Do you see your new custom component? If you do, that means it’s hooked up into the main view, and now we can expand the component. Pretty sweet!
- 7 Component Property: Next, let’s add a simple peopleData property to the custom component to show that we can also use component properties. Like before, we’ll grab the First Name and Last Name data from the People record. But by using the component property, we can pass the data to the custom component.
- 8 Image File: Add the peopleData property inside the existing <script> tag. Then replace the placeholder text with peopleData values and a profile image. Ideally, the image data should be pulled from the same People record. But for now, we’ll add the image locally. Go ahead and move the image file into the same folder as your HTML files. WebViewSync will push the file.
- 9 Custom Tag Attribute: Save the HTML file. But wait! We added a component property to the custom component. So, how do we pass the data from the main view to the component? Easy! Return to your main HTML file, and add the following people-data attribute to your custom tag. This attribute will assign the data values from your model to the peopleData property.
- 10 Tag Attribute Dash: So, why do we need a dash in the custom tag attribute, instead of using camelCase like the component property? With Polymer, it maps any tag attribute with dashes to the matching component property, by automatically converting the attribute dash-case to the property camelCase.
- 11 Refresh View: Save the HTML file and refresh the view. Do you see your expanded custom component? If you do, that’s awesome. Now we can replace the local profile image with the image from the People record. Let’s do it.
- 12 Data Source Fields: Return to your data source that contains the fields for First Name, Last Name, and Nick Name. This time, add the data-source field for Image.
- 13 TRIRIGA Component: Next, let’s add a TRIRIGA <triplat-image> tag to the custom component, so it can grab the Image data from the People record. Add the <link> tag to import triplat-image, the TRIRIGA component for images. And add the <triplat-image> tag to declare that component.
- 14 Refresh View: Save the HTML file and refresh the view. Do you see your completed custom component? If you do, congratulations! Now you’re ready to reuse it in other UX apps! Pretty cool, right?
- Quiz Question 1
- Quiz Question 2
UX Lessons: Continue reading →