You have been redirected from an outdated version of the article. Below is the content available on this topic. To view the old article click here.

Widgets

Widgets are static content nodes containing source code which is transformed into a part of a page on import of a Widget.

There are local and remote widgets, the latter are served from a central Widget server, the former are only available on your local instance.

When dragging a Widget into a page, a new set of DOM elements is created as child nodes of the node the Widget was dropped onto, including metadata defined in the Widget source like data binding and queries. The textual information contained in the Widget is transformed into database elements (nodes, relationships and properties) as well.

Once created, the new DOM elements have no connection to the Widget they originated from. Later changes made to the Widget code don’t effect on the page’s elements. Widgets in Structr are more or less containers to exchange reusable code between Structr instances.

Widgets can also contain Cypher statements to create or modify graph objects on database level.

Screenshot of the Widgets Slideout in the Pages section

Search results for "Widgets"

Local Widgets

The Widgets in the Widgets flyout are arranged in a tree-like fashion based on the value of a special property called treePath. The tree path of a Widget is composed of names separated by the / character. For example, if you want to sort you local Widgets into two different groups, say “User Widgets” and “General Widgets”, you can do so by setting the value of the treePath property of each widget to either “/User Widgets” or “/General Widgets”.

Widgets

The Widgets flyout is the place where local and remote widgets can be managed and accessed. It is divided into two sections, one for local widgets and one for remote widgets.

Local Widgets

The Local Widgets sections allows you to manage the Widgets that are stored on the local Structr instance. You can browse the list of existing Widgets, add new Widgets, and edit them using the Edit Widget dialog.

Remote Widgets

Remote Widgets can be inserted into a page just like local widgets. The only difference is that you can not edit the source code or the tree path, and you see a View button (Eye icon button) instead of an Edit button when hovering over the Widget element.

The Remote Widgets section allows you to select a Widget server from a list of servers, and shows all Widgets that are available on the selected server. Clicking on the Edit button (Pencil icon) next to the select box opens the Widget Servers dialog where you can manage the list of remote widget servers.

Widgets

A Widget is a reusable piece of HTML code that can be inserted into a page. You can make Widgets configurable by inserting config expressions in the widget source and adding the expression into the configuration. Widget config expressions look like this [configSwitch] and can contain any characters (except the closing bracket). If a corresponding entry is found in the configuration, a dialog is displayed when adding the widget to a page.

Widgets can also contain Cypher statements to create or modify graph objects on database level.

The Pages section is one of the most important areas of the Structr UI, because it is the place where you build the frontend of a Structr application. It allows you to manage Structr pages, import Templates and Widgets, manage Shared Components, edit static content, templates or linked files, and more.

Local Widgets

You can make local widgets available to other Structr instances by making them visible to public users, and enter your Widget server’s URL in the Widget Servers dialog on that instance.

Widgets

Once created, the new DOM elements have no connection to the Widget they originated from. Later changes made to the Widget code don’t effect on the page’s elements. Widgets in Structr are more or less containers to exchange reusable code between Structr instances.

You can insert a Widget into a page by dragging the Widget element from the Widgets flyout over the desired position in the page tree, and drop it there. If the Widget has configuration options, the Configure Widget Dialog will pop up, otherwise it will be inserted into the page immediately.

Edit Widget Dialog

The Edit Widget Dialog is the main editing and configuration interface for Widgets. The dialog consists of several tabs that allow you to configure the different aspects of the Widget.

Deployment Format

folder / filedescription
componentsContains the shared components of the pages editor of Structr.
filesContains all files out of Sturctr’s virtual filesystem. Folders and files in the virtual filesystem are not being exported by default. If you want to include a folder or file into the export you have to set the flag includeInFrontendExport on each file or folder. Each file or folder will inherit this flag from its parent folder.
mail-templatesContains the mail-templates.
modulesContains the application configuration and definition of additional modules of Structr e.g. the flow engine.
pagesContains the created pages in the pages editor of Structr.
schemaContains the schema definition and code entered in the schema and code section of the Structr UI.
securityContains the resource access grants defined in the security section of the Structr UI.
templatesContains all template elements of the pages editor of Structr.
application-configuration-data.jsonContains the configured schema layouts of Structr’s schema editor.
components.jsonContains the settings e.g. visiblity flags, contentType or uuid for each file in the components folder of the export.
deploy.confContains information about the Structr system that created the export of the application.
files.jsonContains the settings e.g. visiblity flags, contentType or uuid for each file in the files folder of the export.
localizations.jsonContains the localizations that where created in the localizations section of the Structr UI and that can be used in server side scripting with the localize() function of Structr.
mail-templates.jsonContains the settings e.g. visiblity flags, locale or uuid for each file in the mail-templates folder of the export.
pages.jsonContains the settings e.g. visiblity flags, contentType or uuid for each file in the pages folder of the export.
pre-deploy.confScript that is run before deployment import. Use this to create users who are granted access to nodes in the export files.
post-deploy.confScript that is run after deployment import. Can be used to start any tasks which are necessary after import.
sites.jsonContains sites that are configured in the pages section of the Structr UI.
templates.jsonContains the settings e.g. visiblity flags, contentType or uuid for each file in the templates folder of the export.
widget.jsonContains the widgets that were created in the pages section of the Structr UI.

Local Widgets

Widgets