Widgets are the tools used by Z-CMS to show dynamic contents inside webpages.
Widgets constitute the logic behind the way in which contents are managed in front-end. Widgets can be created for one single site or for the Global level. Here below the first case is described, where a Widget is created inside a site.
A Widget in Z-CMS can be a simple text, a single standard HTML tag or a group of standard HTML tags fully representing a portion of a webpage. In Z-CMS, Widgets can have static text/HTML or can load dynamic content through Content Models using Z-CMS tags.
A Widget in Z-CMS is uniquely identified by its name and type combination. Widgets can be created and stored along with their supporting styles and scripts. Supporting Resources such as additional styles and scripts, images and files can be added by editing stored Widgets.
A Widget can be created in the following way.
- From the Site dashboard page select the label inside the menu on the left of the page, then, click the button and the following page opens:
- Fields inside that page are explained in the table below:
Field ( * denotes mandatory field) Description Widget Name* A name to identify the Widget Widget Type* A text to identify the category the particular Widget belongs to Code Html code of the Widget CSS Supporting Styles of the Widget JS Supporting Scripts of the Widget
- Note: the Combination of Widget Name and Widget Type must be unique. So it is possible to create a new Widget having the same name of an existing one, but of a different type or category. Since Widgets are presented in the list grouped by their names, Widgets types can be effectively used to organize Widgets inside Z-CMS.
Once a Widget has been created, it is possible to edit it by doing the following:
- Go to the Widget list from the Site dashboard page by selecting from left menu.
- Go to the Widget detail by clicking on the Widget row in the list.
- Make necessary editing and save.
When a Widget is edited, the following page opens:
Z-CMS, at the editing of a Widget, allows the addition of supporting Resources through the activation of the "Resource" option highlighted in the picture above. Resources can be additional styles and scripts, images and files. Supporting resources can be ordered inside folders or subfolders.
Moreover, the Widget detail page shows to the right a collapsible panel that displays other objects in Z-CMS that have a relation with the particular Widget. Such Related Items are classified as follows:
- Resources: shows a list of webpages in which the particular Widget is included.
- Widgets: shows a list of other Widgets in which the particular Widget is included.
- Content Models: Shows a list of Content Models that are fused in the particular Widget.
Example: Insertion of contents inside a webpage using a Widget
In this example it is explained how to add contents inside a webpage by means of a Widget. In order to do that it is necessary to create the Widget, to add to it the Resources that builds the webpage and finally to add contents inside a Content Model. The objective of this example is the creation of the page shown in the picture below.
The following scripts define the webpage shown in the picture in static HTML code:
<li> <a href="# class="cls_news" target="_parent"> <div class="cls_newsdiv"> <p class="cls_title">TITLE</p> <p class="cls_descsm">SMALL DESCRIPTION</p> <p><img src="/images/machine.gif" width="240" height="120" border="0" /></p> <p class="cls_descbg">Big description big description big description big description big description big description big description big description big description big description big description big description big description big description big description big description big description big description big description big description big description </p> </div> </a> </li>
That code part should be inserted inside a Widget to generate the static page layout.
Proceed to the creation a new "News" segment Widget:
- Select from the Site dashboard page --> and input HTML code in the text area:
- Input style required for the HTML code in the CSS text area:
- Likewise, use JS text area if there are scripts to be included.
- Click save.
Now the Widget is partially complete. There is a reference to an image in the HTML code [/images/machine.gif]. Expected image can be made available in the following way:
- Edit the Widget.
- Go to its resources.
- Create a new folder named "Images" by selecting the button .
- Import [machine.gif] inside the "Images" folder by clicking the button .
- Click save.
Now the Widget is complete and independent and hence it can be presented inside a webpage using zcms:include tag as follows:
<zcms:include widget=“News” type=“tp_machine” />
The segment is now static because its attributes now hold only static contents. The segment can be converted to a dynamic one so that its attributes load dynamic contents. First step is to create a Z-CMS Content Model. The Content Model is then fused in the widget as follows:
<zcms:global-content name="News_CM" > <li> <a href="# class="cls_news" target="_parent"> <div class="cls_newsdiv"> <p class="cls_title"><zcms:attribute name="title" /></p> <p class="cls_descsm"><zcms:attribute name="small_description" /></p> <p><img src="[zcms:attribute:image]" width="240" height="120" border="0" /></p> <p class="cls_descbg"><zcms:attribute name="big_description" /></p> </div> </a> </li> </zcms:content>
The entire HTML code is enclosed within zcms:content tag.
The zcms:attribute tag is used to incorporate dynamicity to the segment attributes.
So the segment is now converted to a dynamic one and hence "Image: News Segment" will display content which is dynamically managed through the "News_CM" Content Model and the page is successfully created.
Adding Resources to a Widget
In order to use a particular Resource within a Widget, it is required to append "/" to the Resource path. A sample usage is given below.
Consider that an image named "test.jpg" is stored inside the Resources of a Widget. In order to allow the insertion of such image inside the Widget the following path should be used:
<img src=“/test.jpg” />
Similarly, if the particular image is within a folder named "images" inside the Resources, its usage path becomes:
<img src=“/images/test.jpg” />