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.

First

Flow Elements - First

Description

The First element can be used as a shortcut to quickly retrieve a collection’s first element.

Parameters

Name Description
Prev Accepts another element’s Next socket
Next Connects to another element’s Prev socket
DataSource Accepts another element’s DataSource
DataTarget Connects to another element’s DataSource

Search results for "First"

first()

Returns the first element from the given collection. This method is often used in conjunction with find() to return the first result of a query.

first(collection)

First

The First element can be used as a shortcut to quickly retrieve a collection’s first element.

Simple Data Model

We now create a new datatype Project by typing “Project” into the “New type” field (New type) and hitting the “Add” button (Add). When done, it takes a couple of seconds for the schema to update.

Loop

Name Description
Prev Accepts another element’s Next socket
Next Connects to another element’s Prev socket
DataSource Accepts another element’s DataSource. Represents the collection to iterate.
DataTarget Accepts another element’s DataSource. Contains the object of the current iteration.
FirstAction Connects to another element’s Prev socket. Represents the first node to be called for each iteration of the collection.

Create Example Data

Now that we’ve created our project type, we can create database objects of this type by heading over to the Data area by clicking on Data tab in the main menu. Filter the type list in the left column by entering Project to get the list of existing projects (should be empty at the moment). Click on the “Create new Project” button (Create new Project) to create a new project. This creates a new entry in the table. The table lists properties of the new project including some system attributes like an id, name or owner. For now we will only be using the name property which can be set by clicking into the respective cell in the table and typing in the desired name. We create three projects with the names “Project 1”, “Project 2” and “Project 3”.

Resource Access Grants

The first message comes in case that the resource access grant with the signature SchemaType exists, but the method GET is not configured to be allowed for public users.
The second message comes in case a resource is requested for which no resource access grant exists at all (in this case a GET request for the view “public” on the type “SchemaType”).

For the first two lines in the above case (< v.4.0) two separate Resource Access Grants would need to be created. One with the signature SchemaType and the GET permission for public users. The other one with the signature SchemaType/_Public.

Kubernetes / Helm

First you need to configure and update the Structr Helm repository.

Content Types

▸ first bullet point
▸ second bullet point
▸ third bullet point

Simple Data Model

Currently our overview page contains a static table that was handcrafted by us. To populate the page, and in particular the table, with data from our database, we need a data model (also called schema) which describes the type and structure of the information we handle in our application. To do this, we head over to the Schema area by clicking on (Schema tab) in the main menu.

A First Simple Page

In this section we develop the basis for our simple project management application. This first version will only have the capabilities to manage Project objects which each have a name attribute. We start by creating a very simple webpage with some static content. Next, we create a data model and some simple test data. And finally, we modify our simple webpage such that it dynamically fetches and renders our test data from the database.

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.

Connecting flow elements

Now that our Action contains a script, we want it to return its result. For this to happen we have to make sure the flow execution does not stop at the Action element. Drag a connection from the “Next” socket of the Action element to the “Prev” socket of the Return element to create an execution flow, indicated by the green color of the connection. Our function is now capable of returning something after the Action has been dealt with, but at this point in time, it will return an empty result, because we have not yet connected data to the Return element. In the same way the first connection was handled, create a connection between the elements “DataTarget” and “DataSource” sockets to create a data flow. When a node is being evaluated by the engine, it will try to consider connected data flows and make them available within its scripting context in the example of an Action or Return element.

Creating Flows

The first step is to navigate to the Flows page. Hover over the hamburger menu item in the Structr navigation bar and select Flows. Once the editor is loaded, you can either select an existing flow to edit or create a new one. For the sake of this introduction, we will create a new one. To create a new flow, enter a name of your choice in the input field and click the Add button.

Creating Flow elements

For the sake of this demonstration, a simple flow with an Action and a Return element is created. Both of these can be found under the Action Nodes category of the context menu. The first viable start element added to the flow will automatically be marked as such. A start node or flow entry point is indicated by the green coloring of the node header. The start node can be changed by bringing up the context menu on an element, if it is viable a menu item called “Set as start node” will display.

Page Title

Note how the title of the page starts with an uppercase letter, even though its name begins with a lowercase letter. The capitalize() function turns the first character of a string to uppercase.

This expression is a call to the Structr system function capitalize(), which prints the first letter of the given string in upper case. As an argument to the capitalize function another expression is provided:

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.