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.

Pages

The Pages area of the Structr user interface is a Visual Web Application IDE.

It consists of a central Preview Area and fly-outs for the different components of a web application. The most important element is the Pages Tree View which displays the node structure of a page.

The fly-outs on the right contain the HTML5 source elements for a page, Widgets, Shared Components and individual HTML elements in the HTML Palette fly-out. Elements from one of these areas can be dragged and dropped onto the pages tree on the left.

Pages

Search results for "Pages"

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.

Create the Page

To create a new page in Structr, we navigate to the Pages area by clicking on the (Pages tab) in the main menu and click on “Create Page” in the dropdown menu in the top-right corner of the Page Tree. This creates a fresh page with a minimal hierarchical structure, the so-called DOM tree, which can be navigated in the Page Tree in the navigation pane on the left-hand side. Clicking on the page element will display a set of basic attributes in the main area.

Pages Tree View

The Pages Tree View is the main interface for editing Structr pages. It shows a filterable, pageable list of all pages in the database and allows browsing and editing of the underlying node structure. At the root level, a page is represented by the page icon (Page icon) and the name of the page next to it. The name can be changed by clicking on it.

For advanced users, there are many options to precisely control the security and visibility of pages and individual elements, how to handle HTTP errors like 404 (Not Found) or 403 (Forbidden) in your application, etc. Like all other built-in types in Structr, Pages and other HTML elements can be extended with custom properties, relationships to other types, and even inherited from, to allow a very tight integration in your application.

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

Sharing parts of the DOM tree across multiple pages has two main advantages:

  1. DRY (Don’t Repeat Yourself) principle: Developing a component only once and include it anywhere needed saves time. Also, any changes are only done in the shared component and are automatically effective on all affected pages.

  2. Modularity: You can logically group parts of a page that are responsible for a specific part, such as e.g. the navigation or specific visual elements such as a card.

Templates

Finally, we create a shared component out of this template element. This allows us to include the template into every new page we create within this project, creating a skeleton for new pages that include the top navigation menu and the footer. Due to the render(<a data-id="3230f1d81eb345c199024b82eb7c56f2" class="mention">children</a>) expression in the template body, the individual content of each new page can then be added as a child of the template in the DOM tree, allowing us to quickly create pages with the same main theme but different content.

Pagination

The number of results returned by a GET request to a collection resource can be limited with the request parameter _pageSize. This so-called Pagination depends on a combination of the parameters _pageSize and _page. The _page parameter has a default value of 1, so you can omit it to get the first page of the paginated results.

The best way to learn Structr is to use it. Therefore, in the following sections we will build step by step an increasingly complex application. We start with a base application that contains a very basic data model, some example data and a very simple page to display the data. Once this base application is finished, we refine the application’s user interface from a simple table-based layout to a more visually appealing card design. This follow-up section showcases Structr’s capabilities for importing existing web pages as well as the templating mechanisms that allows to quickly create a custom design that can be used across all pages of an application.

Note that starting with Structr 4.0, the built-in request parameters must be prefixed with an underscore, i.e. pageSize becomes _pageSize. This change was introduced to prevent name clashes with user-defined attributes.

If your installation runs on a version prior to 4.0, simply omit the underscore.

Application

application.releases.index.url Contains a URL that is used by the Structr UI to determine the list of available releases to show on the dashboard.
application.snapshots.index.url Contains a URL that is used by the Structr UI to determine the list of available snapshots to show on the dashboard.
application.title The title of the application as shown in the log file. This entry exists for historical reasons and has no functional impact other than appearing in the log file.
application.instance.name The name of this application. In this setting, you can set a string that will be show in the top right corner of the Structr UI.
application.instance.stage The “stage” of the application. In this setting, you can set a string that will be show in the top right corner of the Structr UI together with the instance name.
application.menu.main This setting controls the order and visibility of elements of the Structr main menu.
application.console.cypher.maxresults The maximum number of results returned by a cypher query in the admin console. If a query yields more results, an error message is shown.
application.systeminfo.disabled Disables transmission of telemetry information. This information is used to improve the software and to better adapt to different hardware configurations.
application.legacy.requestparameters.enabled Enables pre-4.0 request parameter names (sort, page, pageSize, etc. instead of _sort, _page, _pageSize, …)

Templates

Finally, we remove the other two overview pages, since we won’t be needing them anymore, and rename our remaining page appropriately.

The building blocks

  • dynamic HTML pages
  • data objects with attributes, and relationships between them
  • object methods, flows or scripts

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 .

User Interface

To manage the user interface, Structr provides a visual web application builder. With the builder, you can either import HTML application templates or individual pages from a URL, or create everything from scratch. The resources (like CSS files, Javascript files, or images etc.) are downloaded automatically and stored in the Structr Filesystem, protected by the same access control and authentication layers as the rest of the data.

Rendering Engine

You can see this DOM structure in every page in the Pages area. This is not just a visual development aid, but reflects the actual data in the database. More precisely, a page is literally stored as the structure of its DOM tree inside the graph database, i.e. each node in the DOM tree is stored as an individual node in the database, connected by edges expressing their parent-child relationships.