page
The page
keyword returns the page currently being rendered.
Note: This keyword is only available in a page context.
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.
The page
keyword returns the page currently being rendered.
Note: This keyword is only available in a page context.
The page
keyword returns the page object currently being rendered.
To create a new page in Structr, we navigate to the Pages area by clicking on the () 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.
folder / file | description |
---|---|
components | Contains the shared components of the pages editor of Structr. |
files | Contains 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-templates | Contains the mail-templates. |
modules | Contains the application configuration and definition of additional modules of Structr e.g. the flow engine. |
pages | Contains the created pages in the pages editor of Structr. |
schema | Contains the schema definition and code entered in the schema and code section of the Structr UI. |
security | Contains the resource access grants defined in the security section of the Structr UI. |
templates | Contains all template elements of the pages editor of Structr. |
application-configuration-data.json | Contains the configured schema layouts of Structr’s schema editor. |
components.json | Contains the settings e.g. visiblity flags, contentType or uuid for each file in the components folder of the export. |
deploy.conf | Contains information about the Structr system that created the export of the application. |
files.json | Contains the settings e.g. visiblity flags, contentType or uuid for each file in the files folder of the export. |
localizations.json | Contains 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.json | Contains the settings e.g. visiblity flags, locale or uuid for each file in the mail-templates folder of the export. |
pages.json | Contains the settings e.g. visiblity flags, contentType or uuid for each file in the pages folder of the export. |
pre-deploy.conf | Script that is run before deployment import. Use this to create users who are granted access to nodes in the export files. |
post-deploy.conf | Script that is run after deployment import. Can be used to start any tasks which are necessary after import. |
sites.json | Contains sites that are configured in the pages section of the Structr UI. |
templates.json | Contains the settings e.g. visiblity flags, contentType or uuid for each file in the templates folder of the export. |
widget.json | Contains the widgets that were created in the pages section of the Structr UI. |
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 () and the name of the page next to it. The name can be changed by clicking on it.
Instead of creating users in the Structr backend manually in the Users and Groups section of Structr’s admin UI, you can allow users to sign-up/self-register. The registration process uses double-opt in by default. All you need is a simple page where new users can enter their e-mail address so Structr can send them an e-mail with a confirmation link.
The following pre-defined MailTemplate keys can be used to configure the self-registration process. In version 4.0 they have been renamed to have a more uniform structure.
Note: The Mail Configuration Settings have to be done for self-registration mails to be sent.
Name | Old Name (removed as of v4.1) | Used as | Default |
---|---|---|---|
CONFIRM_REGISTRATION_SENDER_ADDRESS | SENDER_ADDRESS | The sender address of the registration mail | structr-mail-daemon@localhost |
CONFIRM_REGISTRATION_SENDER_NAME | SENDER_NAME | The sender name of the registration mail | Structr Mail Daemon |
CONFIRM_REGISTRATION_SUBJECT | SUBJECT | The subject of the registration mail | Welcome to Structr, please finalize registration |
CONFIRM_REGISTRATION_TEXT_BODY | TEXT_BODY | The plaintext body of the registration mail | Go to ${link} to finalize registration. |
CONFIRM_REGISTRATION_HTML_BODY | HTML_BODY | The HTML body of the registration mail | <div>Click <a href='${link}'>here</a> to finalize registration.</div> |
CONFIRM_REGISTRATION_BASE_URL | BASE_URL | Used to build the link variable | ${base_url} |
CONFIRM_REGISTRATION_TARGET_PAGE | TARGET_PAGE | the target parameter value for the redirection target page name | register_thanks |
CONFIRM_REGISTRATION_ERROR_PAGE | ERROR_PAGE | the error parameter value for the error redirection target page name | register_error |
Notes:
link
variable is provided for the TEXT_BODY
and HTML_BODY
templates and can be output with the usual syntax: ${link}
link
: https://support.structr.com/confirm_registration?key=<CONFIRM_KEY>&target=/dashboard&onerror=/register-error
CONFIRM_REGISTRATION_TEXT_BODY
and CONFIRM_REGISTRATION_TEXT_BODY
. The script is being run in the context of the user (me keyword points to the user).The system keyword page
references the current page. The page has several properties, including a name
attribute which can be accessed with the dot notation (page.name
), similar to other programming languages such as JavaScript. Summarized, the template expression computes the current page, retrieves its name and it transforms the first character into uppercase. The result is then rendered as the page’s title.
Step 1: Create the basic login page/form as per usual. A regular HTML <form>
with custom submission handling to log in.
If the user is not configured for two-factor authentication, they are logged in.
If the status is 202 is returned, two-factor authentication is required. The returned headers from the login POST contain the required data to use on the next page (and are passed as request parameters in the example code):
twoFactorLoginPage | The page configured in security.twofactorauthentication.loginpage |
token | The token required to log in |
qrdata | The URL-safe base64 encoded data of the QR code which can be scanned with an authenticator app |
This pattern makes sure that the page’s title is automatically displayed correctly when changing the page’s name. To do so, click on “Basic” or “Advanced” and set the name to “overview” (this page will later be the overview page for projects and tasks). To save the name, we click anywhere outside of the input field. The text field should flash green when the data was successfully updated in the database. The page’s title should now be shown as “Overview”.
Clicking on an inactive tab selects the corresponding page, so that the content of that page shows up in the preview area. Clicking on an active tab allows you to change the name of the page, while hovering over a tab shows two additional icons. The View button () opens the corresponding page in a new browser tab, and the Settings button () opens a configuration dialog for the page preview.
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.
It has a header row with two buttons, and a tab for each page. The Import Template button () opens an import dialog that allows you to create a new page, either from HTML code, or by importing a web page from an URL. The Add button () creates a simple page with some initial elements, as shown in the above screenshot.
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.