Building a database component

In this example we are going to build a very simple detail page for our portfolio database. We are also going to prepare the input fields for our database list (see next article).

 

Step 1: Getting started

Go to the Developer start page and click database components. Click on the name of your component.

Screenshot_134-1

 

Step 2: Single form structure

Add a single item to the form of your component. It is very important that you pick a single normal item. Only these variables can be used when building our database list later.

Screenshot_136

1) Give your item a name

(2) Select Single item !important

(3) Select Normal (default value)

(4) Click add item to create this structure

(5) Go to the code editor by clicking it

 

Step 3: static code

We are going to add HTML code to our component.

Screenshot_137-1

(1) Click Auto Create Vars in the upper right corner or click the triple dots next to the item.

(2) Select Overwrite Code to create a clean code structure. After setting up the structure don't forget to clean away the comments and variables you didn't use.

 

Next we are going to add our static html code in the code editor.

Screenshot_138-1

(1) The html code structure for the detail page of our portfolio blog (detail picture below)

(2) We add custom coded CSS or JavaScript to our component (optional)

(3) Click the green save button

(4) We can add Design Panels for the design editor instead of using coded CSS. This step is optional and only recommended if you are working with another designer who wants to be able to style the component himself. (optional)

(5) Go back to the form builder we are going to add input fields to the form to replace our static code.

 

Zoom in of our example code:

Screenshot_141-1

(1) id scomp[:swpageitemid:] and class s-comp[:compid:] is used for the design panels and is needed to create instances. See article about design panels.

(2) s-btn is one of the design classes you can use

(3) [:swprodbackbtn:] generates the link to return to the database list page

 

Step 4: Creating input fields

In the form builder click on the item we created in step 2.

Screenshot_142-1

 

Add the input fields we need for this example.

Screenshot_143-1

(1) Click add component to install 1 upload image and 2 text fields.

(2) Click on the Components for setup

 

Picture upload file setup. We are going to upload a picture and we need two dimensions. One for the database list tile we are going to create in the next article and one big format for our detail page.

Screenshot_144-1

(1) Select the label for the input field

(2) Select the available extensions for the file.

(2.5) Set optional crop values. Once an image is uploaded the crop field will pop up.

(3) Click save

 

Text input setup examples:

Screenshot_145

Add a single input line for the title.

Screenshot_146

Add the texteditor for the content copy.

 

Click back to return to the Component overview. Click Code Editor to return our static html code.

 

step10

 

Step 5: Add input variables to static code

In this step we are going to copy paste our variables into our static html code. Now CMS users will be able to edit their own database entries.Screenshot_147

 

(1) Click the triple dots next to the item to access the variables.

(2) Select Add Code Below. This makes sure our static code is not overwritten

Screenshot_148

Place the generated input variables in the corresponding places in the code editor. It is possible that the id's of the variables are different in your project. They should look similar however if you are following this example.

Screenshot_150-1

 

Don't forget to click save when you are done.

 

What's next?

Now that we have created our database component you can start creating entries in the CMS using Database Management. (see article).

We still need to build our database list page component. This component will show our portfolio items on a page. (read next articles)