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 Code application 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 custom page components.

If you are a graphic designer without access to the  code application  you will need to get permission or give yourself access your account settings:

Login to SiteManager Dashboard

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

(2) Scroll down to access and switch it to ON

(3) Click Save

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

 

Screenshot_242-1

Screenshot_243-1

Step 1: Code Application

Login in your tutorial account and click the Code Application button in the upper right menu.

 

Screenshot_213-1

 

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

 

Screenshot_244-1

 

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

 

Screenshot_245-1

 

Step 2: Change Blockquote Code

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

Screenshot_246-1

 

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>

(3) Click the save button

 

Screenshot_247-1

 

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.

 

Screenshot_248-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.

 

Screenshot_249-1

 

We have now entered the form builder 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.

 

Screenshot_250-1

 

We are going to add an additional author input field to the blockquote. Select Text Field  and click add input.

There are multiple input field available in the form builder: text field, image upload, option, color picker,...

 

Screenshot_251-1

 

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

 

Screenshot_252-1

 

In Text label typ:  "Author:" . Other options we will get to later.

Then click save.

Return to the Page Components list.

 

Screenshot_253-1

 

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)

 

Screenshot_245-1

 

In the code editor click the Triple Dots icon to access the variables created in the form builder structure. These are unique for every single item. So you can't use the variables we just created for "author" outside the "Blockquote (single item).

 

Screenshot_256-1
 

 

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

 

Screenshot_257-1

 

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

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

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.

Screenshot_258

Click back to see the updated result.

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 separate 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.