ULTIMATE DATABASE

In this tutorial we are going to take this online shop page to the next level. We are going to:

• Use a new type of Data Set
• Use some HTML to make a template
• Gain a better understanding of the Component section of the UAA
• Learn how the UDB List command works

Step One: Editing our list.

We already have a list from the last tutorial but that one doesn’t have a picture in it, so let’s go back to that list that we made in the first tutorial and right click on it, select edit and it will open up the edit window.

Change the part 2 data type from none to ‘Image URL’.

Click ‘Save’ to save the changes!

Step Two: Making a new Template.

So let’s go to the Components section and head into the List Templates section, here you will find the product list template we generated from the last tutorial. So we need to make a new list template, to do this we will right click and select ‘New Item’ call it something like product list template.

Step Three: Writing the HTML/UDB code.

Here we are going to use a PANEL UDB command, I’m going to put it inside a div with a class of product to use for styling later.

So here you can see we are using the ‘img’ attribute and assigning it the value of OBJ_DATA(0, 2). That obj data command references the second piece of data on the object we created.

There are ways to have more than 3 pieces of data but I will cover that in a different tutorial.

Copy out this code and click save.

Step four: Displaying the List.

Now we have a list template and a list we can go to the page we want to display the list on.

Here, go to Account > Edit Page and write a List command with the Object id of the list, for me this is #:1134, 4 commas and then the object id of the template, for me this is #:1135. It should look something like this:

When you click save you will see that unless you have added an item to the list already there will be nothing on the page, if we add another line of UDB code we can add a ‘New Item’ button like so:

Now if you click save you will see a ‘New Item’ button, when you click that you will be able to add new items to the list. The -2 is an attribute that tells the system to refresh the page when the save button is clicked, so it will show the new item instantly.

And there you have it! A custom list template, you can make this look however you want it by using the OBJ_DATA command.