Widget (Component) Concept and Widget usage in Protein


Widgets are components with special functions used in Protein page designs. Details regarding the use of widgets on the pages are listed below.


What is a Widget (Component)?: A general definition can be made as a small layer or all of the programs on the user interface that transmit any data or information to the user. Widgets aim to make the User interface, that is, pages, look richer and provide additional functions to the users. For example, the Content detail widget used in Protein enables the content created through the Workcube Content Management system to be displayed on the page.

Where is the widget used?: Widgets are mostly used in page design. In addition, it is used in the "Templates" box, in the section of adding templates and layouts. In page designs, widgets can be used in the desired order and size by selecting the widgets according to the page needs. For example;
If we consider that our page is about education, widgets under the "Education" heading can be used from the widget list. In addition, widgets can be used under more than one title on a page.


Creating widgets: Widgets are created over Workcube. System > DEV Tools > Widgets path is followed on Workcube. On the page that opens, widgets defined on Workcube can be listed and new widgets can be registered. The image contains widget information named "Related Contents". Similarly, the relevant fields must be filled in for the newly created widget. An important point here is the "File Path" part. Widget design codes containing the widget's structure, shape and functionality are written on the workcube, and the page containing the code is added to the "File Path" section.


Widget ParametersTo the right of each widget added to the page design, there are widget settings that can be accessed with the "wheel" icon. In the widget settings box, under the "Params" heading, the widget is available with parameters. Many settings can be made in the widget with these parameters. For example; In a widget where the contents are listed, there are parameters that offer many options such as how many content will be included in the widget, the content in the last added order, the content in the selected language, and the size of the images in the content. However, since the features that each widget needs are different, its parameters may also vary. Widget parameters are located on the "widgetname.xml" file in the code file. Parameters can be added and edited here.


  1. Widget Box settings and additional CSS usage: With Box settings, a title can be added to the widget, and the options in the class section can be used for different widget types.

  2. Widget Extend File and Seo setting: "Extend Css" and "Extend File" widget-specific css definitions can be made, additional code can be added to the widget. In the Seo section, schema types can be selected under the "Schema Markup" option.

Feedback

Did you find this content helpful?
Related Contents