15 April 2014

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.

Selecting a new package in Metrici

Creating a new package in Metrici

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

Metrici home page with a new package

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.

Creating a new question in Metrici

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.

Creating a new node type in Metrici

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.

Adding a further member type to a node type in Metrici

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.

Selecting a node type by reference in Metrici

Fill in details, and click on Save.

Creating a new contact in Metrici

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

Metrici default table view showing a new contact

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.

Selecting the View node type by reference in Metrici

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.

Adding the Node Link Column Script to a view to provide a link called Contacts to the nodes in the table

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.

Setting the view to use on a Metrici package

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.

Table of contacts with a custom view

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.