To activate a new application you must start from the Marketplace, accessible from the menu of your Dashboard.
Here you will find all the applications you can activate, you can search for the Widget Framework within the Communication category, or you can just search for “Widget” on the search bar at the top of the interface. The icon for accessing the Widget Framework's activation should appear among the search results.
From the application's detail interface you simply have to click on the "Get it" button in the lower right corner in order to start the activation process.
From this moment you will have to complete the following steps:
- choose the name of the application, the application id will be automatically completed base on the name you choose, but you’ll be able to change it as you like.
- select the folder on which the application will be installed, the application will be able to see and access its content.
- choose the Intelligence Classification the Widget Framework will have access to.
When all fields are compiled you will be able to click the "Get it" button on the lower right corner in order to confirm the process. Once this operation has been completed, the application will also be available in your "Deck", which is the Dashboard's menu.
On the popup that will appear upon activation's completion, click on “Go to the configuration” to access the application management.
Within the management tab, just below the instructions box, you will see the "Open the console" button to open the Widget Framework editor to start editing your widgets.
Once inside the editor, on the top bar you will find both:
- The search interface, typing a widget name inside the input will make the interface show only the pages where a widget with that name is present
- The button to create a new project
Pressing the button to create a new project will open the Project Creation popup. Here you will have to choose a project name and the folder you want your project to be linked to. A project can be also linked to a subfolder, this way you could have more than one project inside one application without data overlapping. Press the “Confirm” button in order to create the new project.
You will be then redirected to the Project Management interface. Click the "+" button in order to create a new page (which is basically a collection of widgets).
In the creation popup you will have to fill the name of the page you are going to create and you will land to the Page's management interface.
On the top of this interface you will find all the information on the page itself, such as its name and the number of widgets. On the upper right corner you will find :
- the buttons for creating a new widget
- the button for downloading the technical reference
- the button for obtaining the embed code of the page (this button will be disabled in the first place, since you don’t have any widget on the page yet).
On the bottom of the page you will find:
- the button for going back to the projects and page management on the left
- the button for publishing all the changes you have made on the page on the right (this button is disabled in the first place).
Each page should be used as a unique "block" of widgets. If you plan to publish them together within the same project, creating links between multiple widgets, you should use the same page, since you will be able to publish them together and to obtain the embed code as a whole. Otherwise you should use a page for each different publication.
When clicking the "New Widget" button, you will be presented with the interface for choosing the type of widget you want to create within the page. On the left you have a combobox that shows you the available widget types you can use. Next to that you will find an input field where you will have to enter the name of the new widget. You will also find a preview of all the available graphic templates for the specific widget type, changing widget type from the combobox will refresh this preview. Let’s start by choosing a "Content List" widget.
This widget is commonly used to show a list of content from a specific folder, with infinite scrolling pagination. Press the “Confirm” button to create the widget on the page.
You will be pointed to the widget's configuration interface, where you can edit the graphical styles, the configuration parameters and the internationalized labels of the widget itself.
There are two types of editors:
- the visual editor, where you can change the parameters of the widget with a friendly user interface;
- the code editor, intended for advanced users with programming skills, where you can manually edit the configuration code of the widget itself.
Once you have made your changes, press the “Save” button that is now active in order to save your work on the widget. When the widget is saved, the “Publish” button will be active too, since there are no changes pending on the page.
Before publishing the page let's try to add another widget first. This time, try to add a Menu widget. This type of widget is commonly used to show the tree view of the subfolders linked to the project.
As you can see, the menu widget has more configuration buttons than the Content List. There is an additional button which can be used to switch between the desktop and the mobile interface of the widget. There is also a specific "LINKED" button to link the Menu widget to the Content List widget previously created. By doing so, when embedding such page into an external page, the Menu widget will “control” the Content List widget, and by clicking on a specific folder, the Content List widget will automatically refresh in order to show the content of that specific folder.
Now save the Menu widget with the new configuration and publish the page; this process will create the necessary files that will linked to the page and used by the specific embed code.
The “Page Embed code” button and the single embed buttons of every widget will be now active. Pressing the “Page Embed code” you will get the code you have to copy on your page to embed all the widgets. The first block must be pasted within the <head> tag of your page, while the second block must be pasted within the body of your page, where you want the widgets to appear. You can change the position of the widgets on your page by moving the <div> tags with the specific id of the widget you want to move.
If instead you want the embed code for just a single widget, you can click on the chain icon right next to the name of the specific widget.