= Develop a layout
:description: This pages describe how to create a layout and use it in an application.

This pages describe how to create a layout and use it in an application.

== Definition

A layout is structure of the application and page content. It defines menu positioning, a footer, or any common content that could be displayed on every page of the application.
Each application can have its own layout, or the same layout can be used consistently to all applications.

There is an example of layout in Bonita Portal, "Bonita Layout", that can be found in the Administrator "Resources" section. +
It is made of three containers:

* layout-header +
          Comes with the links to the user modal and the applications modal, and the living application menu widget to display the navigation of your application.
* layout-content +
          Comes with the living application iframe widget to display pages or forms of your application.
* layout-footer +
          Empty by default
* User modal
          Current logged in user information, language selection and sign out link
* Application List modal
          List of application links for the current logged in user
The layout was created using Bonita UI Designer, so you can export it and customize it with Bonita UI Designer.
You can add more widgets in the containers layout-header and layout-footer.
The 'layout.css' file manages the layout behavior, allows to display the content container in full height,
and header and footer with fixed size. +
But it does not allow to add other widgets than the living application iframe into layout-content.

For example, you could:

* Add elements in the layout-header, on top of the menu, like a login box or brand image
* Add some content in the layout-footer

== Usage

A layout is deployed in a Bonita Runtime as a .zip archive containing a page.properties file and a resources folder.

* The `page.properties` file contains the metadata for the layout (the name used in the URL, the display name, and a description). For example:
+
----
name=custompage_layout
displayName=Application layout page
description=This is a layout page dedicated to new born living applications. It is created and editable using the UI Designer. It allows to display an horizontal menu, and an iframe. The menu allows to target some pages and the iframe define the area to display those targeted pages.
resources=[GET|living/application,GET|living/application-page,GET|living/application-menu]
contentType=layout
----

* The resources folder must contain an `Index.groovy` class or an `index.html` file and optionally can contain some additional resources.

In case of layout edition using Bonita UI Designer, the contentType is kept unchanged.
xref:resource-management.adoc[Export the examples] to see how to structure your layout.

== Constraints

A layout can only be used as the main container of an application. It cannot be used as a simple application page.

== Layout resources management

=== Layout resources

If you are not using Groovy, you can directly access a resource by adding a link in `index.html`.

For example: `<link href="css/file.css" rel="stylesheet" />`

=== API access

If your page is viewed in an application, you will have access facilities for xref:rest-api-overview.adoc[the portal API].

You will be able to access the portal API using the following path: "../API/{API name}/{resource name}"

=== Theme access

If your page is viewed in an application, you will have access facilities for xref:applications.adoc[the application theme].

The `Theme.css` is directly accessible by adding the following link in `index.html`: `<link href="../theme/theme.css" rel="stylesheet" />`
