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.

User Interface

Login

To get access to Structr’s backend, you need to login first. The backend access URL has the following form:

http://<hostname>:<port>/structr/#login

The default hostname is localhost, the default port is 8082.

The path part after the # is related to the main menu section in Structr, see also the chapters below.

This page shows a login dialog with username and password.

Dialog

Login Dialog

Credentials

The initial credentials are

Username: admin
Password: admin

Please make sure to change your password directly after login.

Change password

To change your password, you can either go to the Security view, or the Data view or use the REST interface.

Logout

To logout, click on the logout button in the header. This will terminate the login session in the current browser instance.

Search results for "User Interface"

Create the Page

The elements of a page are organized in a tree structure, the so-called DOM tree. Specific nodes in the tree can be expanded or collapsed to navigate through the tree. For more details on the user interface, see

Dynamic Content / Repeater

This concludes the development of the most basic functionalities of this simple demo application. The following four sections cover more advanced topics by extending our application in the following ways:

  1. extending the user interface with imported styles from existing projects,
  2. adding images to projects via built-in types,
  3. adding editing functionality to the table and
  4. extending the data model with tasks and deadlines.

These sections are largely independent of one another, as they only assume the functionality described in this section.

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.

The building blocks

A Structr app has a data model, a user interface, and processes that implement the business logic of the application. Together with pre-configured building blocks to reduce the need for boilerplate code, this is what makes an application:

Local Widgets

When you click the Add Widget button (Add Widget icon), 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 (Pencil icon) to open the Edit Widget dialog. The Edit Properties button (Edit Properties icon), Delete button (Delete icon) and Access Control button (Key icon) work just like everywhere else in the Structr User Interface.

User Interface

The user interface of a Structr App consists of Structr pages that are served by the built-in HTTP server (Jetty) under a specific URL. To access the application, you simply point your browser to the location of your Structr server, which is usually at http://localhost:8082/structr if Structr is running.

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.

UI Settings

Currently the UI Settings tab only allows customizing the main menu of the admin interface. For future releases it is planned to add more user interface customizations to this tab.

The building blocks