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.

Shared Components

Shared Components

Search results for "Shared Components"

Shared Components

All shared components of a Structr project are listed under the “Shared Components” fly-out on the right hand side in the Pages area. Open the shared components fly-out and drag the navigation element (<nav>) into the drop zone at the top of the shared components area.

The Shared Components flyout is the place where you can create and manage Shared Components. It is very similar to the Pages Tree View flyout, because it shows a list of elements and the tree structure those elements. In fact, Shared Components are all linked to a single, hidden page which we call the Shadow Document.

Creating a Shared Component

You can create new Shared Components by dragging and dropping an element from the Pages Tree View into the drop area at the top of the Shared Components flyout. When you do that, Structr copies the source element to the Shared Components flyout and moves all its children to the new copy. The source element becomes a so-called “synced node” that relays the rendering process to the Shared Component.

Shared Components

Note how the icon of the <nav> element changes from regular element to Yellow Brick icon. Shared components in the fly-out on the right that are linked to one or more pages, have the same icon Yellow Brick icon while shared components that are not used on any page still have the regular icon regular element .

Templates

Start by setting the template’s name to “Main Page Template”. Next, drag the template element onto the drop zone in the shared components fly-out.

We can address the first issue by replacing the HTML code of the navigation bar and the footer by expressions that render the respective shared components into the page instead by using the include() system function. This function takes the name of the element as argument a name.

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.

Shared Components

To customize Shared Components you can use the auto-script property sharedComponentConfiguration on the linked node. If present, the script expression in this property will be evaluated before the rendering continues with the shared component.

The overview page has three main components that make up the page’s body: The top navigation bar, the actual content, and the footer. Let’s convert the top navigation menu and the footer into shared components.

Notice that the page output doesn’t change at all when moving regular DOM elements to shared components, allowing to change implementation details without affecting the end-user experience of the application.

The imported page is much more complex than the simple overview page we manually created before. For larger pages like this, it is recommended to logically group parts of its HTML structure into reusable elements like the so-called Shared Components that are handled in the following sections.

Templates

The template in it’s current form is not particularly useful for two reasons: Firstly, it’s redundant, since it contains the HTML structure of the navigation menu and footer which are already shared components, and secondly, it creates an entirely static page which defeats the purpose of the repeater elements we used in our page created before.

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.

Import Bootstrap Page Template