Polymer: Creating a simple list component – Part 3

Now it is time to allow the user to add items to the list.

I have used some Polymer paper elements to show how to use and what it looks like.

The component developed in the latest articles ( Part 1 and Part 2) is the same. There was no changes to the code. Only the index.html page was changed to implement a modal dialog and some input fields.

New componentes

I have used the paper-dialog component to show the modal dialog to the user, and paper-input to represent the input fields.

You can read more about those components at  paper-dialog and  paper-input

Step 1 – Changes to the toolbar

To allow the user to add a new person in the list, I added an icon button to our toolbar.

Toolbar Only

The add icon have an onclick event that show the modal dialog.

Step 2 – Add the modal dialog component

Now the paper-action-dialog contains the design of our dialog with input fields inside.

Modal Dialog

The first paper-input element will receive the focus when the dialog becomes visible because we used the autofocus attribute.

Step 3 – Changes to the Script

Step 3.1 – Changes to polymer-ready

Previously when the page finished loading, the list component was populated. Now I removed the sample data to pass only a reference of data array to the component.

Now, When the page finishes loading, it will be empty with only the toolbar.

Step 3.2 – Add function to show modal dialog

Add the function to show the modal dialog. I am using the document.querySelector function, but any other way to obtain the reference to the component should work fine.

Step 3.3 – Add function to save the new person in data array

Finally after the dialog is shown, the user will enter the data and click on Save button. This function will be fired when this button is clicked.






You can download the project files from the link below. The download does not include the bower_components elements, that you can download/install using bower (as already presented in Polymer: Basic installation article).

Download ZIP file.