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.

The Objects in B1 explained

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

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

💡

This will define some placeholder objects in your screen to make the process to create a screen easier and faster

Click on “Confirm” to save the screen
Filter “List of screens” by module “MyAppModule” and click enter
Click on the object name in the grid to open the Screen Designer

2 Configure the Layout

Select the screen (top element in the treeview) in the “Object Structure” panel
Go to the “Attributes” tab. Find the Layout attribute and click on the small magnifying glass and select the layout “3T” and click “Confirm”

On the same tab find the “Title” attribute and change it to “Order Overview”
Click on Launch to see the new layout of our Screen

💡

One error will appear, this is expected as we haven’t set the datasource yet and we will do it in the next chapter

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