> This page is for Product Documentation.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.navipartner.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.navipartner.com/_mcp/server.

# Capture service UIs

> The Capture Service user interfaces (CS UI) are used for defining the look and feel of Store Assistant mobile device app.

You can see the list of all available CS UIs in the **CS UIs** administrative section. You can view and edit the existing CS UIs or [<ins>create new ones</ins>](/product/store-assistant-cs-ui-setup).

To see the current UI layout and hierarchy of UIs in the mobile app, navigate to the [<ins>**CS UI Structure**</ins>](/product/store-assistant-cs-ui-structure) administrative section. You can add or remove some segments from the current app layout if needed.

> **Note:** For the mobile app to work correctly, it's necessary to define the **Start UI**, which is the first screen that the user sees when opening the mobile app. By default, this is the login screen. You can pick the start UI either from the **CS UI Structure**, or an individual **CS UI** card.

## General

There are several customizable **Form Types** that exist in NP Store Assistant. These UI types are listed below along with the screenshots depicting the necessary setup in Business Central on the left side, and on right - the corresponding mobile app UI. If you wish to apply one of these UI layouts in your app, use the options presented in the Business Central segment of each screenshot.

* **Card** (e.g. Login)\
  The **Card** type is used only for the Login screen, in which user input is required.

  ![example](/_fern-img/9761960381d6f4fa5b7799063a86d34533e60330e92ca111acfd97c19e7d797d.webp)

* **Selection List** (e.g. main menu)

  ![example](/_fern-img/0c1408beeca0cef1f5e5720717a57201458e95d6d0ae2e15d4cb26e9346697dd.webp)

> **Tip:** Selection lists don't have the **Next UI** link like the **Card** pages, as they typically give users the option of navigating to multiple pages in no specific order. To specify which UIs users can navigate to from the selection list, provide the UI IDs in the **Call UI** column of the **CS UI Subform**.

* **Data List** (a dynamic list of information that relies on the documents created in Business Central e.g. Inventory pick list)

  ![example](/_fern-img/76e3cd07ed9e0654bfb79fa2459cc9f79cdf743e8b46ceb45546ce0c5ee2b2cc.webp)

* **Data List Input** (these types of UIs determine what happens at the end of the process, i.e. when the barcode is scanned e.g. Warehouse Pick document)

  ![example](/_fern-img/bfb4dc4a6ba7d967270ee8a68133152b725883215a0d9575a3651aa32d2345bf.webp)

> **Note:** NaviPartner provides standard UIs which can be implemented and modified as per requirements of the users.

## UI Subform

In the **UI Subform** section of each CS UI, you can add the actual content of each mobile UI, and designate where the page elements you create will be placed. The available areas are **Header**, **Body**, and **Footer**.

> **Note:** In the **NP Store Assistant** app you can click the header of each page to see which **UI Code**, **Handling Codeunit**, and **Next UI** were used.

## Data pattern code

Data pattern code is the code assigned to a certain product. It consists of some of the product's main characteristics, such as ingredients, year of production, expiration date, and so on. Each of these characteristics has its own ID, and the combination of all of them provides a unique ID for all goods which are placed inside the warehouse.

## Handling codeunit

Each UI can be associated with one handling codeunit. Codeunits govern the back-end processes associated with each UI.

#### See also

* [<ins>Set up Capture Service</ins>](/product/store-assistant-cs-setup)
* [<ins>Set up CS UIs</ins>](/product/store-assistant-cs-ui-setup)
* [<ins>Set up Capture Service users</ins>](/product/store-assistant-cs-user-setup)
* [<ins>Set up CS Data Patterns</ins>](/product/store-assistant-cs-data-pattern-setup)