Skip to main content
A composition contains one or more pages, each with its own URL. You arrange components on each page’s canvas, configure them, and publish when ready. UI Studio tracks every save as a new version so you can view the full history of your work.

​
The compositions list

The Compositions screen shows all compositions in your environment. Each row displays the composition name and the date and time it was last edited. Click any row to open the composition in the editor.
Use the search bar to filter compositions by name or description. Use the Filters button to filter by a date range for the Last Edited On column. Click the Name or Last Edited On column headers to sort the list.
Follow these steps to add a new composition.

Open the Compositions screen

Navigate to UI Studio in the left navigation panel and click Builder.
2

Click Create New UI

On the Compositions screen, click Create New UI, enter a name and description for the composition, and click Create.
The new composition is listed on the Compositions screen. You can now select the composition and build it.
Follow these steps to add components to build a composition.

Open the Compositions screen

Navigate to UI Studio in the left navigation.

Select a composition

Select a composition from the list.

Start building

The new composition opens in the editor.
Composition
Search Page
Search Bar
Results
Facets
Details Page
Text
Image
Button
  • Add pages, and then click the main canvas. Click the gear icon of the canvas to open the Customize Section panel and set the canvas color and size.
  • Drag components from the left panel onto the canvas to build your page layout.
  • Click any component to select it and configure it in the Customize panel.
  • Repeat across pages until your composition is ready, then save your work.
The Quickstart walks through this process end to end, and the component documentation covers every configuration option.

Quickstart

Get up and running with your first UI Studio page in minutes.

Components

Browse available components and learn how to configure them.
A composition contains one or more pages. Each page has a name and a URL path. One page is designated as the home page, which loads when a user visits the root of your published composition. Pages can also contain subpages, each with a URL path nested under the parent page’s path.
​
Name
string
required
Display name for the page.
​
URL
string
required
URL path for the page, relative to the composition’s root URL.
​
Home Page
boolean
When true, this page loads when a user visits the root of the published composition. Only one page can be the home page.
​
Subpages
array
Optional child pages nested under this page’s URL path. Each subpage has the same configuration options as a top-level page.
Publishing makes your composition available at a public URL in the format YOUR_COMPANY.ui.lucidworks.com/COMPOSITION_NAME.
1

Click Publish

In the composition’s editor screen, click Publish.
2

Confirm publication details

Review and confirm the location to publish. It typically includes your company name, composition name, and page title. Click Publish.
The published URL uses the composition name. To change the URL, update the composition name before publishing.

​
Composition settings

Settings apply at the composition level and affect all pages. Access settings from the editor toolbar.

​
Branding

Upload a logo and favicon for your composition. These appear in the browser tab and any branded areas of your pages.
Image file displayed in branded areas of your composition.
​
Favicon
file
Icon file displayed in the browser tab.

​
Localization

Configure the language, timezone, and date and time format for your composition. These settings affect how dates and times display across all pages.
​
Language
string
Language code for the composition, for example, en-US.
​
Timezone
string
Timezone for the composition, for example, America/Los_Angeles.
​
Date and time format
string
Format string for displaying dates and times, for example, MM/DD/YYYY h:mm A.

​
Authentication

Configure single sign-on (SSO) for your composition using OIDC.
​
Enabled
boolean
When true, SSO is required to access the composition.
​
Session duration
number
How long, in hours, a user session remains valid.
​
Session extension threshold
number
How many minutes before session expiry a session is eligible for extension.
​
OIDC
group
Identity provider configuration for the OIDC protocol.