Manage Screens in the UX Preview

The UX Preview tab in the Plan view is where you manage the key user screens in your application plan. Composer generates screens based on the requirements and personas you define, giving you a clickable prototype you can navigate, customize, and share with stakeholders before generating design objects.

Screens in the UX Preview are interconnected—clicking a button on one screen navigates to the target screen, creating a site-like browsing experience during planning.

Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close

View and manage generated screens

After you generate an application plan, Composer creates custom screen mockups based on your requirements. These screens can include dashboards, forms, record views, and record actions, tailored to your application's needs.

You can navigate between three views to manage your screens:

• Site Preview for a navigable site experience.
• All Screens for a gallery of every screen.
• Individual Screen for focused editing.

Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close

Site preview

The Site Preview displays your screens as a navigable site with a header and top-level pages. Screens are linked together, so you can click through the application as your users would—navigating from one screen to the next.

Use this view to:

• Visualize the overall site structure and navigation flow.
• Click through linked screens to validate the user experience.
• Walk stakeholders through the application flow.
• Preview the navigation structure before generating objects.

All screens

The All Screens view displays a gallery of all generated screens. This view gives you a comprehensive overview of every screen in your application plan.

Use this view to:

• See all screens at a glance.
• Navigate to a specific screen for editing.
• Mark or unmark screens as Site Pages.

Individual screen

The individual screen view provides a focused editing interface for a single screen.

Use this view to:

• Edit the screen by describing changes in natural language in Composer.
• Add a screen to the site.
• Remove a screen from the site.
• Review screen details and components.

Add a screen to the site

Site Pages appear in the generated site's navigation. You can add or remove screens from the site in the following ways:

• In the All Screens view, click on a screen card to add it to the site.
• In the Individual Screen view, click ADD SCREEN TO SITE.
• In Composer, describe which screen to add or remove. For example: Add the Compliance Review Queue screen to the site or Remove the Settings screen from the site.

You can also remove a screen from the site by clicking REMOVE SCREEN FROM SITE on the individual screen view.

Add a screen

You can add a screen using the + Add Screen button or by describing it directly in Composer.

To add a screen using the button:

1. In the UX Preview tab, click + Add Screen.
   Result: Add screen prompt opens in Composer.
2. Describe the screen you want. For example: Add a screen for a vendor map.
3. Click .
   Result: The new screen appears in the preview.

You can also click Composer to open the chat directly and describe the screen you want, instead of clicking + Add Screen first.

Edit a screen

To edit a screen using Composer:

1. From All Screens, click a screen you would like to edit.
2. Click Composer.
3. Describe your change in the chat field.
4. Click .
5. Review the changes in the preview.
6. Continue the conversation to refine the screen further.

Generate or customize screens with Composer

In the UX Preview tab, you can use plain language prompts in Composer to generate, edit, and manage your screens. Describe what you want and Composer updates the screens for you. This lets you quickly iterate on designs, incorporate stakeholder feedback, and keep screens aligned with the evolving requirements.

With Composer, you can manage screens in multiple ways:

• Screen-level changes: Add new screens, reorder screens, regenerate screens from updated requirements, and link screens to specific requirements or personas.
• Layout and structure changes: Rearrange page layouts, switch between column configurations, and restructure screens into guided experiences.
• Component-level changes: Add, remove, or reorder individual components, update labels and properties, and replace placeholder data with more realistic content.
• Navigation changes: Define interactions between screens, modify navigation links, and specify what happens when users click buttons or submit forms.

Screen management

• Add new screens: Create additional screens based on your evolving requirements. Composer determines the appropriate layout and components based on your description. For example: Add a screen for a vendor map.
• Reorder screens: Change the order of screens in the application. For example: Move the dashboard screen before the settings screen.
• Update existing screens: Modify screen content and configurations through natural language prompts. For example: Add a customer details section to the form screen.
• Regenerate screens: Regenerate screens based on updated requirements. For example: Regenerate screens based on my updated requirements.
• Replace sample data: Change specific values within screen components. For example: Replace the sample data with more realistic customer information.
• Rearrange layouts and structure: Change the structural layout of screens, such as switching to a multi-column grid or a guided experience. For example: Change this dashboard to a three-column layout.
• Define interactions and navigation: Specify how users navigate between screens, such as button clicks or form submissions. For example: When the user clicks 'Submit', navigate to the confirmation screen.
• Link screens to requirements: Connect screens to specific actions or activities in your requirements. For example: Link this form to the 'Submit Application' action.
• Map screens to personas: Adjust screen designs to match persona needs. For example: Update this screen for the Manager persona.
• Sync screens with requirements: Update screens to reflect changes in your requirements. For example: Update screens to align with the new approval workflow.
• Mark screens as Site Pages: Designate which screens appear in the generated site's navigation. For example: Make this screen a Site Page.

Component management

• Add components: Include new components like headers, record lists, forms, buttons, tables, and other supported component types. For example: Add a header to this screen.
• Remove components: Remove components from the screen. For example: Remove the notifications component.
• Update component properties: Modify labels, data, configurations, and other component settings. For example: Change the header label to 'Customer Information'.
• Reorder components: Change the order in which components appear on screens. For example: Move the record list above the form.
• Describe screen components: Specify what fields, buttons, tables, and other UI elements a screen contains. For example: Add a table with columns for Name, Email, and Status.

Link editing

• Modify navigation links: Update links between screens. For example: Link the 'View Details' button to the Record Summary page.

Review generated screens

Review each screen to confirm that they accurately represent the intended user experience.

When reviewing, check the following:

• Screen layout and structure match your requirements.
• Data is realistic enough to validate the design.
• Navigation links between screens lead to the correct targets.
• The correct screens are marked as Site Pages.

Generated screens use mock data for visualization purposes. To make your screens functional with real data, you need to connect them to actual data sources after you generate your application objects.

After you generate objects with Composer, configure and refine data connections in Appian Designer by modifying interface expressions, adding record type relationships, and setting up connected systems for external data sources.

Delete a screen

Deleting a screen removes it permanently. This action cannot be undone.

To delete a screen, in the All Screens view, click on a screen card.

Limitations

Composer accelerates screen design during planning. However, it has some limitations:

• No drag-and-drop editor: Composer does not include a drag-and-drop editor. Use natural language prompts to rearrange layouts and reorder components.
• Predefined components only: Composer works with a predefined set of components. Custom components are not supported during planning.
• No cross-tab modifications: Composer does not modify your data model or other planning tabs when editing screens.
• No version history: Regenerating screens replaces all existing screens and links. You cannot roll back to a previous version.
• No mobile layouts: Mobile-specific layouts are not generated. Screens are designed for desktop and tablet viewports.
• Placeholder data only: Screens use placeholder data and do not connect to your data model during planning.
• Link scope: Link edits apply only to the current screen and do not cascade to other screens.
• Visual mockups only: Planned screens do not create record types, process models, or data stores until you generate objects with Composer.

Feedback