Search results for "Widget"

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”.

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.

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 () next to the select box opens the Widget Servers dialog where you can manage the list of remote widget servers.

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.

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.

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.

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.

When you click the Add Widget button (), a new local Widget will be created, given a default name, and added to the “Uncategorized” collection. You can then hover over the Widget element in the list and click the Edit button () to open the Edit Widget dialog. The Edit Properties button (), Delete button () and Access Control button () work just like everywhere else in the Structr User Interface.

The Configure Widget Dialog appears when you insert a parameterized Widget into a page. If the Widget source contains variables, you have to provide a value for each variable, otherwise the Widget cannot be appended to the page.

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 () instead of an Edit button when hovering over the Widget element.

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.

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.

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.

The options tab contains configuration options for the widget. If you check the Is <a data-id="06295f219bad4f4dbb0fbadbac982c85" class="mention">Page</a> Template checkbox, Structr expects the Widget to contain a complete HTML document and makes it available under a special button in the Pages Area. You can use the selectors field to specify CSS selectors which determine the HTML elements in the Page Tree where the Widget can be inserted using the right-click menu.

The Widget Servers Dialog allows you to manage the available Widget servers.

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.

A Shared Component is a reusable structure of HTML elements that can be inserted into a page via drag & drop. It is very similar to a Widget, but there is one important difference: when you insert a Shared Component into a page, Structr creates a special element in that page that relays the rendering to the original Shared Component. This means that changes are immediately visible on all pages where the component is present.

The Help tab contains detailed descriptions and instructions for all the Widget configuration options.