WIDGETS IN CIMM2Touch

What is a Widget?

A widget is a generic term used for the part of a graphical user interface (GUI) that

displays information or allows the user to interface with the application in a specific way for a

user to interact with an application.

Typical Widget includes Buttons, Dialogue Boxes, pop-up windows, pull-down

windows, icons, scroll bars, resizable windows and menu bars.

Widgets are reusable.

What is a Widget in CIMM2Touch?

In CIMM2Touch widgets are typically used to create a template for static web pages

either by manual configure (Static widget) or passing URL (Dynamic widget). Widget will be

Dragged and Dropped for the selected static web page that displays the widget Template

information.

There are two kinds of widgets that can be created in CIMM2Touch

1. Widget with static template/content

2. Widget with dynamic content – widget types

To navigate to the Widget Browse, the user has to follow the path below.

MANAGE SITE >> Touch Site >> CMS >> Page Designer >> Static Pages

On the left hand side of the page we find a tool bar as shown below,

Widget Browse:

a) Widget with static content - Illustration

In “Widget with static content”, only the contents or data is manually configured in the widget body, while a creating a widget.

Click on “Widget Browse ” to view the list of all the existing and newly created “Widgets”.

“Widget Icons ” - To Preview, Edit and Delete the widgets. Refer the below snapshot,

Action: Click on “Add New Widget” Button to create a new “Widget”. After Clicking on the button “Add New

Widget”, a new pop-up window appears. Refer the below snapshot

Step 1: Give a Widget name, Description and Select a preferred Type of Widget from the drop down list (not a mandatory at this point of time). Add the content to display in “Template Code” and save the widget by clicking “SAVE WIDGET” button. Refer the below snapshot:

Step 2: Create a new Static Page or Select an existing Static Page, Open selected Static page in

“Edit ”. Mouse Over on Icon “Move within column” and click on it to get and select “Edit

”. Refer the below snapshot

Step 3: Click on “HTML Elements ” given in Left Menu. Among the components listed out,

Expand “Widgets ”. Select appropriate widget in widget list and drag and drop into the row section of the selected static page to get the widget content reflected on Ecommerce web page. Finally “save

” the static page. Refer the below snapshot

Step 4: To verify the static page content that is being displayed on Ecommerce Site: Go to website URL of specified Site and append the Static page URL as Extension to site name: https://sitename/staticpagename. Refer the below snapshot of revere site.

Any content changes made on the widget would automatically get reflected on refreshing web page.

b) Widget with Dynamic Content Illustration

In “Widget with Dynamic Content” a request URL and its type (any generic name) must be added in

Widget type window, while widget type is created in order to link the service request URL with a

widget(or widgets).

Click on “Widget Browse ” to view the list of all the existing and newly created “Widgets”. “Widget Icons

” To Preview, Edit and Delete the widgets Refer the below snapshot,

Action: Click on “Add/Edit Widget Type” Button to create a new “Widgets”. After Clicking on Button

“Add/Edit Widget Type” a new pop-up window appears. Refer the below snapshot

Step 1: For Type: Enter a widget type name and provide an API URL and save the widget by clicking “ADD” button. Refer the below snapshot.

Step 2: select an existing widget or create a new widget, and provide a Widget name, Description and Select a preferred Type(mandatory for widget with dynamic content) of Widget from the drop down list (mandatory). Add the content to display in “Template Code”, Content must be JSON response from CIMM2BCentral with the below specified syntax:

{"data":{"anykey":"anyvalue"}}

Below is the sample JSON response from CIMM2BCentral:

"data":{

"title":"Revere Electric",

"link":null,

"publishedDate":1470030540000,

"imageLink":null,

"imageTitle":null,

"description":"WeBlog",

"author":null,

"entries":[

{

"title":"What is Your Cost for Unplanned Motor Down Time?",

"link":"https://reverebeta.cimm2.com/roller/UnilogBlog/entry/what-is-your-cost-for",

"publishedDate":1466553600000,

"updatedDate":1466754084000,

"content":"<p class=\"shareThisBlog\">\nShare this Content: \n<a href=\"share/?p=facebook&u=http://www.revereelectric.com/resources/blog/details/what-is-your-cost-for-unplanned-motor-down-time&t=What is Your Cost for Unplanned Motor Down Time?\" class=\"DiSp_f...",

"description":"<img src=\"/ASSETS/IMAGES/CMS/STATIC_IMAGES/Blog_Imgs/0421Colorado Springs Utilities022011--photograph_848w477h-f0f43984.jpg\" class=\"img-responsive\">\n<p>Over the last 100 years, many government agencies have imposed strict requirements for implementin...",

"author":"Revere Electric"

},

Using the above response data, fetch the required data and loop through each of the entry fields that you want to display on the web page. This can be done using the templating languages like velocity, integrated with HTML code.

Update the widget by clicking “UPDATE WIDGET” button as shown below. Refer the below snapshot:

Step 3: Create a new Static Page or Select an existing Static Page, Open selected Static page in “Edit ”. Mouse Over on Icon “Move within column” and click on it to get and select “Edit

”. Refer the below snapshot

Step 4: Click on “HTML Elements ” given in Left Menu. Among the components listed out,

Expand “Widgets ”. Select appropriate widget in widget list and drag and drop into the selected static page and get widget content reflected on the ecommerce Site. Finally “save ” the static page. Refer the below snapshot

In this case RSS is a widget that is dragged and dropped.

Step 5: We need to refresh web system parameters: ReloadSystemConfig.slt for the first time when a new custom widget type associated with a widget, is linked with the static page.

This must be done because whenever a new widget type is created, it must be updated in the widget properties file, which is present on a designated server path.

To check static page content that is being displayed in Ecommerce Site. Go to website URL of specified Site, login with valid credentials and check by providing Static page URL Extension as https://sitename/staticpagename.

Refer the below snapshot of revere site.

NOTE: The widgets can be linked to any number of static pages and once the widget content is updated, all the static pages content would be updated at once which are linked with this particular widget.

Hence, in CIMM2Touch, the widgets are far more reusable and very efficient.