Your first web app

By Andrew Clifford

With a unified approach, creating a web app is as easy as creating a web page.

This week I want to cover how to create a simple web app with Metrici. Although its an overworked example, I am going to create a contacts database app.

This is a hands-on guide. If you haven't already registered, look at the getting started instructions to register and create a simple web page.

Follow the steps below to create the contacts app. If you want to see a demo first, look at the Your first web app video.

1. Somewhere for the app

Sign in and click on Home to go to your home page. Use the New button, and select Package.

Call your new package Contact App and click on Save at the bottom of the page.

When you are back at the home page, click on the Contact App box to take you to the Contacts application area.

2. Data types

When you are inside the Contact App, click on New, and this time select Question. In the Name field, enter Email, and in the Question style drop-down, select Single line. Click on Save to save the question.

Create another one just the same, this time called Phone.

3. Node type

From inside Contact App, click on New, and this time select Type. Give it a name of Contact, and in the Member Type List, type in system.NODE_NAME as a Member Type.

Click on Apply at the bottom of the page. This will open up another space in the Member Type List. This time select Email from the drop-down list under Member Type, and click on Apply again.

Finally, select Phone from the drop-down list, and click on Save.

4. Somewhere for the data

Click on Home to go back to your home page. Create a new package, just like in step 1, but this time call it My Contacts.

Click on My Contacts to go into the My Contacts area. Click on New, and in the box at the bottom, enter youraccount.ContactApp.Contact, where youraccount is your account reference/user identifier, and click on New.

Fill in details, and click on Save.

When you click on Save, your new contact will be shown.

5. Define view

It would be nice if the table showed all the contact details. Click on Home and then Contact App. Use the New button and enter library.table.ViewType in the box at the bottom, and click on New.

In the Name field, enter View. In the Columns section, enter a Column Name of Contact and in the Column Source enter library.table.NodeLinkColumnScript.

Click on Apply to show a new column. On the new column, leave Column Name blank and select Email in the drop down list. Click on Apply again and select Phone. Then click on Save.

6. Use view

Click on the Home button to go back to the home page, and then click on the My Contacts link to go to your contacts data area.

Click on Edit at the top of the page, and then click on the Display section. In the View Selection, enter youraccount.ContactApp.View under View family or view.

Click on Save, and you should now see a table of your contacts. Now when you use the New button, you will see Contact listed under In this package. You can add more contacts.

In just a few minutes, you have built a web app in Metrici. In a few more minutes you could share your contacts database with your colleagues, or package your app for others to use.

This is a very simple app. Applications can have any data types and any structures, not just one simple table. You can add more features, styling and processing rules. You can use high-level building blocks, not just packages, questions, types and views, to create more advanced apps.

Next week I will explain a how Metrici is structured and how the pieces you've used fit together.

Subscription