The Presentation Layer – Layouts and Fields

Building Your Interface

Layouts are the forms you present to your users. Create rich pages and navigation.

Fields are nested in Layouts, and  let users enter data about Items.

In our first lesson, we learned how to use Item Types, Relationship Types, and Fields to construct a data model for the application you want to build. In this second lesson, we'll teach you to use the presentation layer in WorkXpress to construct an interface for your application. In WorkXpress, the presentation layer of an application uses Layouts to display Fields.

Layouts

First, we'll learn about the fourth Building Block of WorkXpress, Layouts.  We'll learn how to nest Layouts and Fields to create your interface.  Below are the Layout Types available for you to use in your application.

Fields

Finally, we'll expand our knowledge of Fields, which we began to discuss in our previous lesson. Below are the different Field Types available in WorkXpress.

Prerequisites

The Data Layer - Items and Relationships

What You'll Learn

After completing this lesson, you should be able to answer these questions:

1. What is a Layout?
2. Can Layouts be nested?
3. What is the function of a Field in a Layout?
4. What are Layout and Field Behaviors?
5. What is Layout and Field Security?
6. What Layout Types are available for you to use?
7. What Field Types are available in WorkXpress?
   

 Layouts

Layouts exist to organize the presentation of Fields. In WorkXpress, several Layout Types are available to organize other Layouts or Fields in a variety of formats.

 Fields

Fields exist to store and display data about an Item or a Relationship.  In WorkXpress, there are many types of Fields to display many different types of data.

 Layout Nesting

The most fundamental Layout Type in WorkXpress is the Page. Every Layout you create will be presented to your users from somewhere within a Page.

A Page is part of a class of Layout Types that does not contain any Fields directly; instead, a Page contains only other Layouts. All Layouts may either contain other Layouts or they may contain Fields. 

The process of adding a Layout Type or a Field inside another Layout is called nesting. Technically, there's no limit to the number of Layouts or Fields you may nest, but you're practically limited by the quality of the resulting interface.

The image below shows an example wherein Layout B is nested inside of Layout A.

 Field Nesting

You'll need to add Fields to your interface to display data. Fields are always nested inside of Layouts.

In this first image, we have nested six fields inside a Field Grid (Layout B from our example above). Fields Grids and other Layout Types are explained later in this lesson.

In this second image, we show three Fields nested inside a List Layout (Layout C).  Nesting Fields inside a List Layout actually makes those Fields into column headers for the list that display a range of values for those Fields from your data layer below.

Finally, we take Layouts B and C and nest them back into Layout A.  This final image shows the results of nesting Layouts inside other Layouts and of Fields nested inside those Layouts. As you can see, the basic look of an application's interface begins to emerge.

It's critical for you to understand the idea of nested Layouts and Fields before you move on to the next lesson about the Logic Layer.

Mode

A Layout's mode defines whether a given interface element can be viewed or edited, or whether saving the interface element will result in the addition of a new Item.  There are four modes of behavior for any interface element:

1. Hidden - A hidden element is not visible to the current User (see the next section of the lesson, Security, for more details)
2. View - an element in View mode can only be seen and may not be modified by your users.
3. Edit - A user may enter or modify data using a Layout or Field in Edit mode.
4. Add - Upon saving, a Layout or Field in Add mode will create a completely new Item and associate any new data with that Item as appropriate.

Security

You may configure security options for any Layout that restrict a user's ability to edit or view that Layout. Commonly, security is used to hide or reveal Layouts to a user based on that user's role in your organization.

Conclusion

To build software with WorkXpress, you must conceptualize your presentation layer; that is, the interface you would like to offer to your users, in order to achieve your development goals. In other words, you must understand how to create the right Layouts and Fields to nest together to produce the various pages and navigation elements that will present an effective interface to your users. Continue to think about the following questions as you move on to our next lesson:

• What Pages will you need to create?
• What Layouts will you place inside those pages?
• What Fields will you place inside those Layouts?