Manifest Creation and Customization

Creating a new Manifest Fragment

Suppose our client would like to see all the Storage Areas available within a Store.

We can easily add this capability to the Fluent Store Web App code free!

First, watch the video below to see how to create a new Manifest Fragment document...

Next, we need to add this fragment to the Account Settings and then reference it in the Fluent Store Manifest document.

The main Fluent Store Manifest Document is already added to your Training Account. See the following Account Setting:

`fc.mystique.manifest.store`

If you do not have this setting or you would like to update it, download the main store manifest.

The Fluent Store URL:

`https://[ACCOUNTID].sandbox.apps.fluentcommerce.com/store/`

Note: Replace "

`[ACCOUNTID]`

`FCTRAINAU001`

Log in to the Store app using the F_SYD Location User:

• Username:

  `F_syd@fcfashion.com.au`

• Password:

  `1234`

Watch the video below to see how it's done...

Add a Component to a Page

We now need to display all the Storage Areas associated with this Store.

To do this, we'll use the standard List Component provided by the Component Library.

First, let's add the component to our page...

In the next lesson, we'll provide some real data from the API to the list.

For more information and configuration options, see the List Component documentation.

Configure a Data Source for your Page

In order to show data in the Storage Areas List, we need to configure a data source.

Components on a page can reference a data source from a query defined on the Page Component.

First, we'll configure a page query to retrieve the currently active Location's associated Storage Areas.

The

`data`

`query`

`variables`

1"data": {
2
3"query": "query locationStorageAreas ($locationRef: String!) { location (ref: $locationRef) { id ref storageAreas { edges { node { id name status type } } } } }",
4
5"variables": {
6
7"locationRef": "{{activeLocation.ref}}"
8
9}
10
11}

You'll notice the use of a special variable called

`{{activeLocation.ref}}`

`activeLocation`

Once the Page query is defined, go to the Component configuration and add a

`dataSource`

`dataSource`

`storageAreas`

`location`

`location.storageAreas`

`"dataSource": "location.storageAreas"`

With the data source configured, all that's left is to update the fields to be displayed in the list with dynamic values. We'll display the Name, Type, and Status from the Storage Area.

This is done by specifying the field of each node in the Storage Areas connection:

`{{node.name}}`

1"attributes": [
2
3{
4
5"label": "Name",
6 "value": "{{node.name}}"
7
8},
9
10{
11
12"label": "Type",
13 "value": "{{node.type}}"
14
15},
16
17{
18
19"label": "Status",
20 "value": "{{node.status}}"
21
22}
23
24]

See this in action in the video below...

Learn more about configuring the page query and dynamic attributes in the UX Framework Configuration Guide.

Adding a Details Page

In this lesson, we'll show you how to create a details page for a specific item in a list, and hyperlink the list to the detail page.

Configure the components on the page

Next, we'll configure our Details page with a page query similar to the listing page.

For the details page, we'll query the

`storageAreaById`

Watch below to see this in action...

Now that we have our Storage Area Summary information and have set it to half-screen width, let's add a list to display the associated Articles.

Working with Dynamic Values

The Framework provides some useful features for working with dynamic data.

First, let's consider date- and time-based data. The Framework provides a useful

`dateStringFormatter`

Take a look at the following video to see this in action.

For more information on helper functions available to the dynamic values, read about Template Strings in UX Configuration Common Concepts.

There are also some useful features for working with arrays. Typically, you can access an array item by its index as follows: 

`node.attributes.0.value`

This works on edges too:

`node.articles.edges.0.node.ref`

Now, you can retrieve Attributes by Name:

`node.attributes.byName.Size`

In our example, the Article associated with the Storage Area contains an attribute named "FulfilmentType". See how we can show this in the Articles list below.

You can render images in lists and cards by specifying the component attribute type as "image." This also allows you to provide additional options to the generated image HTML.

1{
2     "type" : "image",
3     "value" : "{{attributes.byName.imageUrl}}",
4     "options" : {
5         "width" : 220
6     }
7 } 

Read more about configuring Dynamic Attributes in UX Configuration Common Concepts.

Configure i18n language translation

Lastly, we show you how to configure the i18n Language translation keys for your Fluent Web App.