Mission 3: Component code

Briefing

In this mission, we are going to use the Developer application to add an author field to our blockquote component.

The Developer APP is the beating heart of the SiteManager platform. It gives you access to the front-end code of the Design and CMS application. With it you can edit all SiteManager library components and create your own.

If you are a graphic designer who has the developer's application locked you will need to activate it in your account:

Login to SiteManager Dashboard

(1) Click the My Account link in the left sidebar menu

(2) Scroll down to the developer APP and switch it to ON

(3) Click Save

Do not forget to lock the Developer APP after this mission if you are not a front-end developer. SiteManager empowers designers and developers to work together in one time-saving platform.

1 setup

Step 1: Developer APP

Login in your tutorial account and click the developer button in the CMS editor.

3b developer login

In the developer hub you will see different modules. In this mission we are going to focus on editing our blockquote component. Click the Page Components button.

4 developer home

Scroll down to the bottom until you see the Blockquote component in the list. Click the green code icon as shown below.

5 edit code 2

Step 2: Change Blockquote Code

When the code editor opens you will see the following screen:

6 code start

We are now going to add some custom CSS and HTML code to the blockquote component.

Copy and paste the following code in the right place:

(1) Author CSS

.author { font-size:16px; color: #517575; text-align:right; font-weight: bold; }

(2) Blockquote HTML

[div class="author"]~ Gail Devers[/div]

Don't forget to change [ ] to < and > in the code above (see picture below).

(3) Click the save button

mission3fix1

Return to the content editor to see the result. As you notice the author Gail Devers content has been added to the blockquote component and styled with the CSS class we added.

8 result part 1

In the next Steps we are going to make the author an editable form field for our CMS users. If you are a graphic designer you may skip these steps and go to debriefing at the bottom of this page.

Step 3: Back-end form builder

Repeat step one and return to the Developer APP. Scroll down to the Blockquote component in the Page Components list. Click on the blockquote title as shown below.

9 developer form 1

We have now entered the form structure of the Blockquote component. Click on the Blockquote (single item) title.

With the back-end builder you can build CMS forms for any structure.

10 developer form 2

We are going to add an additional author input field to the blockquote. Select Textfield (1) and click Add Component (2).

There are multiple input field available in the form builder: textinput, file upload, select option, color picker,...

11 developer form 3

The textfield component has been installed. To setup the component click the newly added Text Field setup link.

11 developer form 4

In Textinput Setup type Author: in the Field Description (1). Do not change any other available options.

Click save (2).

Return to the Page Components list (3) by clicking the breadcrumb link.

12 developer form 5

Step 4: Code update with author form variable

Now that we have updated our blockquote form with a new author text input field we need to add the variable for this field in the HTML code of the component.

We return to the Blockquote code editor. (repeat Step 1)

5 edit code 2

In the code editor click the Auto Create Vars button.

mission3fixautocreatevars

A pop-up will open with the option to Overwrite the existing code or adding the variables below the existing code. Click the Add Below Code button.

14 autocreate vars 2

Below the Blockquote (single item) all form variables are being generated. (1)

Select and copy the created [:swvar:text:x:] variable for the Author input field and paste it over the Gail Devers text.

mission3fixgenerated code

(1) Do not forget to delete all auto generated code below the original html (starting from line6).

The 'Blockquote (single item)' HTML code should look as the picture below

It is possible that the number 34 in [:swvar:text:34:] is a different number in your project.

This is how your code should look like (replace [ ] with < and > )

[div class="[:swvar:column:7:]"][:swvar:columndrag:7:]
[blockquote class="[:CODE:2:]" [:CODE:3:]][:swvar:text:33:]
[div class="author"]~ [:swvar:text:34:][/div]
[/blockquote]
[/div]
mission3fixendcode

click save

Step 5: CMS form updated result

Return to the CMS editor and edit the Blockquote component.

Pro Tip: you can always double click when you hover over an page component to open the form!

You will see that the Author input field has been added to the form. Type in Gail Devers and click save.

Click back to see the updated result.

( video )

Debriefing

Well done! From the 9 missions this is the only one that will use the Developer app. For more detailed information i suggest you visit our youtube channel and knowledge base.

We are planning to make a seperate mission pack for the developer in the future.

Tomorrow we will learn more about the advanced cms options and how to copy content.

As always if you have any questions please send us an email at support@sitemanager.io.