Setting up a screen from scratch with a template

1 Context:

🧠

In this task, we will start implementing a small app for our Product Owners’ B2B use case. We will start by building a first screen for managing orders. Here, we will use various components such as grids, forms, DSOs and other controls.

2 Result:

This is what the final screen will looks like:

Screen Designer

Live Screen

3 Step by step guide:

1 Create the screen

👋 Navigate to -> “Design” -> “Screens” -> and click “Create”
👋 Fill in a name -> “OrderOverview_<yourname>”, add a description and select the “MyAppModule” module
👋 Choose the template “Search Screen (simple)” in the right panel
👋 Click on “Confirm” to save the screen
👋 Filter “List of screens” by module “MyAppModule” and click enter
👋 Click on the object name to open the Screen Designer (Blue name of your screen)

2 Configure the Layout

👋 Select the screen in the “Preview” panel
👋 Go to the “Attributes” tab. Click on the small magnifying glass and select the layout “3T” and click “Confirm”

👋 On the same tab set the “Titel” and “Titel Short” to “Order Overview”

The "Screen Designer" explained

1 Action Ribbon Bar

you have a ribbon bar where you can carry out different actions for your entire screen. You can for example save your screen, discard changes or launch your design to preview the screen.

2 Design View

You can see the layout design and the low-res preview of your screen displayed in form of a mock-up. On this preview section you mainly position and move objects using drag & drop.

3 Schematic View

Schematic view of the screen. All objects in the screen are shown here in a list

4 Flow

The relations for the objects are set here.

5 Attributes

The attributes for the objects are set here. This is a form with drop-downs, a search function and an auto-save function

6 Library of Objects

Overview of all objects that can be used in a screen.

7 Objects structure

Overview of all objects in a hierarchical tree structure

4 Explanation:

☝

In the first step, we created the initial screen for our new application. For this, we gave the screen a name, assigned it to a module, and then used a standard template from Build.One for its creation. For each object in Build.One, there are different types of attributes that can be set. In the first step, we learned about the "Layout" attribute to configure the layout of the screen. In the Config tab, the most important attributes for the different objects are summarized.

5 Helpcenter Article

Screen

Screens are containers that are used to place and organise other B1 Objects inside (e.g. ‣ , ‣) in a specific layout. There are three types of objects in Build.One that can be used to create screens

helpcenter.build.one

Object Designer

The Object Designer is used to edit and maintain the objects in Build.One. The Object Designer adapts its functionalities to the object that has been opened, like this, the options available are different if the object that is being edited is a screen, a from or any other element like grids or toolbars.

helpcenter.build.one

Flow View

The Flow Designer provides a graphical user interface to link objects like a ‣ and a ‣. Different link types are available.

helpcenter.build.one