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.

The Compositions screen, where you create, manage, and publish your UI Studio compositions.

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.

Add a new composition.

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.

Page management in a composition.

​
string
required
Display name for the page.
​
string
required
URL path for the page, relative to the composition’s root URL.
​
boolean
When true, this page loads when a user visits the root of the published composition. Only one page can be the home page.
​
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.

Add a new composition.

The published URL uses the composition name. To change the URL, update the composition name before publishing.

​
End-user single sign-on for published compositions

UI Studio supports end-user Single Sign-On (SSO) using Okta OIDC and controls access for end users who visit published search sites. When enabled, users must authenticate before accessing a published composition at YOUR_COMPANY.ui.lucidworks.com/COMPOSITION_NAME. When SSO is not enabled, the published URL is publicly accessible. To enable UI Studio SSO for your published compositions, contact your Lucidworks representative.
UI Studio SSO is different from Lucidworks Platform SSO, which controls access for administrators who build and manage compositions in the Lucidworks Platform workspace.

​
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.
​
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.
​
string
Language code for the composition, for example, en-US.
​
string
Timezone for the composition, for example, America/Los_Angeles.
​
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.
​
boolean
When true, SSO is required to access the composition.
​
number
How long, in hours, a user session remains valid.
​
number
How many minutes before session expiry a session is eligible for extension.
​
group
Identity provider configuration for the OIDC protocol.