> For the complete documentation index, see [llms.txt](https://community-test.logicnets.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://community-test.logicnets.com/release-9/design-considerations-and-frameworks/frameworks/application-starter-framework/screen-layout-configuration.md).

# Screen Layout Configuration

## Setting Up Your Screen

One of the first items to configure using the Application Starter Framework is the way your application screen is set up and the parts of the screen your end users will see and interact with. This includes whether and where sections appear on the screen – header, main screen, side panel, footer – and if the system displays additional information using pop-up screens.

With the framework, you define the parts of your screen – the basic screen layout – and how the system reacts when users interact with items in different sections on the screen. You then assign styles using layout templates and cascading stylesheets (css), which allow you to control the look and feel of each part of your application at a very granular level and ensure that all parts in the same category or class get updated at once. This document does not go into detail on using cascading stylesheets, but there are many good sites online for details on using css.

## Screen Layout and Structure

The first set of configuration options are related to the screen layout/structure of your application. This is much more than the colors and fonts to use on the site: it is the working parts of the screen – the top bar, the side bar, the main part of the screen – and the options they provide users. It is also the controls in those sections and how those controls respond as the user makes selections on the screen.

The Application Starter Framework allows you to quickly set up a multi-section layout like the one shown below:

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-ccbfd10412fafe429de3e5d0faf9c56bd87c22ec%2Fba023bbb-dc88-42e4-9cac-da806c80da4a.png?alt=media)

The screen layout is divided into sections that include a top bar, which is often the location for navigation options; the main part of the screen; and an optional side panel, footer, and popup window.

To begin setting up the structure of your application you enter the names of the logicnets that will control each section:

1\. In the Designer, click the name of your project in the Project pane. 2. Click *Modify*. 3. Click the *Framework* tab at the top of the Viewer pane. This is where you will set up the primary structure of your application.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-f989c006e6253f03681560d6f6755b883b21fdb4%2F373eee92-f01c-4168-b102-dc72672c44ae.png?alt=media)

4\. Leave *Custom topbar* set to default of "no" for now. The system will enter the preset top bar. 5. Enter the name of your application. This is the name users will see at the top of the screen.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-c63d7e50f7482a43c51a4d2ee6d961c469abc185%2Ffdc6c252-40f0-4859-b0c0-a3e76d5ee7bc.png?alt=media)

6\. Enter the logo you want to display on the screen. You can leave this blank for now if you want. 7. Enter the name of the logicnets that will control the main section of your application. Add the name of logicnet that renders the UI of the main section and the name of the one that processes selections made on the main part of the screen. You will build these logicnets shortly and can rename them if you want, but for now you might want to use *main\_ui* and *main\_process*.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-88ab10a5d6205eb0267a95a3372ad5b5367e4631%2F8a87967a-6044-43d9-bfa2-bcc085b64e3d.png?alt=media)

You do not have to create two separate logicnets, but doing so allows you greater control over the way the application functions, and it is a good design principle to separate presenting from processing. If you combine the display and action functions in the same logicnet enter the logicnet name in the *Main UI net (logicnet)* field.

8\. To select the sections to include click the checkbox next to an option; for example, to include a side panel in your layout click the checkbox next to *Show side*. The side and footer sections are optional. You add pop-up windows from within your application application flows, so you do not configure them in the project settings.

![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-f26f284917cfe110d8cd605a495ebdfab4117e9d%2F3b73bd45-53c7-4309-af95-fb94d75d8d3b.png?alt=media)

9\. Enter the name of the logicnet that will control the section of the application you want to display in the related field for that section.

The Application Starter Framework includes a default layout template, JavaScripts, and associated css classes. As necessary, you can redefine the .css classes used for the standard styling in a custom .css file that will overwrite the standard styling with your custom styles. You can also include a custom .js file containing JavaScript functions that that system should invoke on the client side.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://community-test.logicnets.com/release-9/design-considerations-and-frameworks/frameworks/application-starter-framework/screen-layout-configuration.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.