> For the complete documentation index, see [llms.txt](https://docs.amltd.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.amltd.com/dc-works/suites-and-deployment/style-and-configure-the-suite.md). # Style and Configure the Suite Learn how to configure the Suite’s layout, background, loading indicator, fields, App Buttons, logo, and launch actions. A Suite’s design should help users quickly identify and open the Applets required for their work. Begin with the launcher template selected during Suite creation, then adjust the overall Suite properties and individual fields as needed. ### Understand the configuration hierarchy Suite appearance is configured at two levels: 1. **Suite properties** control the overall layout, background, and launcher behavior. 2. **Field properties** control the position, size, color, border, and text alignment of individual elements. For example, the Suite’s Layout properties can arrange its fields generally, while the properties of one App Button can give it a different size or color. ### Open the Suite Editor To open a Suite: 1. Open **Suites** from the main navigation. 2. Locate the Suite. 3. Select the Suite name. The Suite opens in the Suite Editor. Select an empty area of the Main Workspace to display the overall Suite properties. Select an individual field to display its field properties. ### Set the workspace dimensions The Taskbar contains controls for the Suite’s width, height, orientation, and workspace zoom. Use these controls to review the Suite at dimensions that represent its intended Android device or Web App.
Set the workspace dimensions before refining the layout. The zoom percentage changes how large the Suite appears in the Editor. It does not change the dimensions of the deployed Suite. When designing for more than one screen size: * Test the most common dimensions first. * Prefer layouts that can adapt to the available space. * Avoid unnecessary fixed positioning. * Confirm that button text remains readable. * Test each intended platform after saving. ### Configure the Suite layout To open the Suite layout settings: 1. Select an empty area of the Main Workspace. 2. Select **Layout** in Suite Properties. 3. Open **Item Horizontal Alignment**. 4. Select the required alignment or spacing option. 5. Review the result in the Main Workspace. 6. Save the Suite.
Use Item Horizontal Alignment to control the general horizontal arrangement of Suite fields. Available options include: * **Left-aligned** * **Centered** * **Right-aligned** * **Space around** * **Space between** Alignment places the Suite’s fields toward a selected area. Spacing options distribute the available horizontal space around or between the fields. Choose an option appropriate for the number and size of App Buttons and other elements in the Suite. ### Configure the Suite background Use **Suite Properties > Background** to configure: * **Main Background** * **Background Image** * **Loading Indicator**
The Background properties establish the primary appearance of the Suite launcher. #### Set the main background color To change the background color: 1. Select an empty area of the Main Workspace. 2. Select **Background**. 3. Select the color control under **Main Background**. 4. Choose or enter the desired color. 5. Review the Suite’s fields against the new background. 6. Save the Suite. Choose a background that provides sufficient contrast with the logo, text, App Buttons, and loading indicator. #### Add a background image To add a background image: 1. Open the Suite’s **Background** properties. 2. Select the upload control beside **Background Image**. 3. Select the required image. 4. Review it at the intended Suite dimensions. 5. Save the Suite. Use an image that: * Has appropriate dimensions and resolution. * Does not make App Button text difficult to read. * Does not place important details behind fields. * Remains clear in the intended orientation. * Supports the purpose and branding of the Suite. Avoid visually complex backgrounds when the Suite contains several buttons or text fields. #### Configure the loading indicator The loading indicator appears when **Show Loading Indicator** is enabled under **Suite Properties > Info**. Use the **Loading Indicator** color setting to select a color that remains visible against the Suite background. After changing the background, review the loading-indicator color and adjust it if necessary. ### Select a field to configure Select a field from either: * The **Fields** list; or * The Main Workspace. The Properties Panel changes to show the settings available for that field. Depending on the field type, the available sections may include: * **Info** * **Position** * **Size** * **Color** * **Border** * **Text Alignment** * **Field Properties** * **Actions** Confirm that the intended field is selected before making changes. ### Position a field Use **Position** to control where the selected field appears in the Suite. Position settings can be used to: * Place fields in the intended sequence. * Align fields with related elements. * Add spacing around a field. * Place a logo or App Button in a specific part of the launcher. * Control how overlapping elements are layered. The available Position settings depend on the selected field and its positioning method. When positioning fields: * Keep related App Buttons together. * Maintain consistent spacing. * Avoid unintended overlap. * Keep frequently used Applets prominent. * Leave adequate space around the logo. * Review the layout at the intended dimensions.
Use Position properties to arrange individual Suite fields after establishing the general layout. ### Size a field Use **Size** to configure a field’s width and height. Field dimensions can be entered in: * Pixels; or * Percentages. The selected measurement unit is independent of whether **Fixed Width** or **Fixed Height** is enabled.
Use pixels when an element requires a specific measurement. Use percentages when its dimensions should relate to the available workspace. For example: * A logo may require carefully controlled dimensions. * App Buttons may use consistent dimensions. * Dividers may use percentage-based widths. * Text or Header fields may span a larger portion of the Suite. Preview the Suite at each intended screen size after changing field dimensions. ### Configure field colors Use **Color** to configure the selected field’s foreground and background appearance. Available options vary by field type and may include: * Text color. * Background color. * Transparent background. Choose colors that: * Provide sufficient contrast. * Clearly identify interactive fields. * Remain consistent across related App Buttons. * Distinguish primary and secondary operations. * Remain readable against the Suite background. Use consistent field colors to create a clear and recognizable Suite interface. ### Configure field borders Use **Border** to configure the selected field’s border appearance. Available settings may include: * Border color. * Border thickness. * Border style. * Border radius. Border radius controls how rounded the field’s corners appear. Use a consistent border treatment for App Buttons that perform similar functions. A different border or color can be used to distinguish an important or potentially destructive operation. ### Configure text alignment Use **Text Alignment** to position text within the selected field. Text-alignment controls vary by field type. After changing alignment, confirm that: * App Button labels are centered or positioned as intended. * Header text remains readable. * Long labels are not cut off. * Related fields use consistent alignment. Keep App Button text short enough to display clearly at the intended button dimensions. ### Style App Buttons App Buttons are the primary navigation controls within most Suites. For each App Button, review: * **Field Text** * **Linked Applet** * Position. * Size. * Color. * Border. * Text alignment. * Hidden and disabled settings. Use a consistent design for buttons that have equal importance. You can use visual differences to establish hierarchy. For example: * Primary Applets can use more prominent buttons. * Administrative Applets can be positioned separately. * Less frequently used Applets can use smaller or secondary styling. * Related Applets can share a color or layout area. Do not rely on color alone to communicate a button’s purpose. Use clear Field Text as well. ### Configure the Suite logo A Suite logo is added as an Image field. To configure it: 1. Select the Image in the Fields list or Main Workspace. 2. Review its field properties. 3. Adjust its position and size. 4. Configure any available appearance settings. 5. Review it against the Suite background. 6. Save the Suite. Configure the logo as an individual Image field. Ensure that the logo: * Is not stretched or distorted. * Remains readable at the selected dimensions. * Does not overlap App Buttons. * Provides adequate contrast with the background. * Does not occupy more space than necessary. ### Style visual fields Visual fields can be used to organize and explain the Suite interface. Available visual fields include: * **Header** * **Horizontal Divider** * **Vertical Divider** * **Text** * **Image** * **Connectivity Display** Use these fields purposefully: * A Header can identify the Suite or a group of Applets. * Dividers can separate groups of related operations. * Text can provide short instructions. * Images can provide branding or visual identification. * Connectivity Display can communicate connection status. Avoid adding visual fields that do not improve navigation or understanding. ### Configure action fields Available action fields include: * **App Button** * **Logout Button** * **Update Button** Style action fields so users can distinguish their purposes. For example: * App Buttons should clearly identify their linked Applets. * Logout Button should be available without being confused with a workflow Applet. * Update Button should be identifiable as a Suite update control. Use consistent dimensions and alignment while allowing different types of actions to remain visually distinct. ### Configure Launcher Load Actions Use **Suite Properties > Actions** to configure **Launcher Load Actions**. Launcher Load Actions execute when the Suite launcher loads. To open these settings: 1. Select an empty area of the Main Workspace. 2. Select **Actions** in Suite Properties. 3. Open **Launcher Load Actions**. 4. Add and configure the required supported actions. 5. Save the Suite. 6. Test the Suite on its intended platform.
Use Launcher Load Actions for supported operations that must occur when the Suite opens. ### Review the complete design Before saving, confirm that: * The Suite dimensions represent the intended screen. * The background provides sufficient contrast. * The logo appears correctly. * App Buttons use clear labels. * Each App Button links to the correct Applet. * Related Applets are visually grouped. * Fields have consistent spacing. * Text is readable. * The loading indicator remains visible. * Logout and Update buttons are easy to identify. * No fields overlap unintentionally. ### Save and test the Suite Select the save control in the Taskbar after changing the Suite’s layout, background, fields, or actions. The Suite Editor does not include a Play or test-run control. Test the saved Suite: * On an enrolled Android device; or * As a Web App. Confirm that the design works at the actual runtime dimensions and that each field behaves as intended. ### Next Continue to **Deploy a Suite to an Android Device** to learn how to enroll a device and make the configured Suite available through the native DC Works application. --- # 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.amltd.com/dc-works/suites-and-deployment/style-and-configure-the-suite.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.