Page Header App

The Page Header App is used at the top of a webpage to give the user essential information at first glance. This can be something as simple as just a Fund Name or it can include a Shareclass or a dropdown list for selection purposes with a search field and details such as Key Facts like NAV, AUM, Morningstar Ratings, Risk Ratings, etc.

3 Presets are available: Header Only, Basic and Full.

Header Only includes a Title and Subtitle
Basic includes a Title, Subtitle, and Key Facts such as Shareclass codes (ISIN/Bloomberg Ticker/etc.)
Full includes all of the above plus search fields, and a shareclass count

Add a new App

Click the Studio tab, then click + to add a new application.

Studio Wizard

Click Next to start the Studio Wizard.
Provide a name and description for your app. Once these items have been filled, the Next button will become active. Click Next.

Use the dropdown arrow to select a template to base your application on. Enter a few letters of the application name to make the search easier.
Select Kurtosys App Page Header 1.4.0 (or the latest version available), then click Next.

Use the dropdown arrow to select a Preset. For this example, select Page Header Wizard – Full.
Click Next.
Connect your data – allowed inputs

- Culture – enter the cultures added to the Data Dictionary
- Client Code – use the dropdown arrow to select Class Properties > ISIN or whichever entity is used for searching

Click Next.

No Parent Client Configuration is required for this app, click Next.
The token will be added automatically, click Next.

Heading Configuration

- Title Text – mandatory field. Although you will fill in static text using the Wizard, this will be changed in the config to use dynamic data
- Sub-Title Text – non-mandatory field, can be left blank

Note: Although it is mandatory to add Title Text, this text is static and will need to be changed to dynamic text in the config.

Click Next.
Definition List Configuration – the definition list is a list of properties (such as the corresponding ISIN, Bloomberg Ticker, etc.) that corresponds with the Fund defined in the heading. Click + to add items to the definition list or add these later to the config. Each item is added with a Term (the definition text), and Definition (the property to be used).

Note: Although properties should be used for Terms, static text only can added here. This will need to be amended in the config so that it uses a Query. The static text, if added here, can be used as a memo as to what should be added with queries.

Click Next.

Dropdown Configuration – the Page Header – Full preset includes a dropdown search, add some prompt text so the user knows they can make a selection, e.g. a shareclass belonging to a particular fund.
Click Next.
Search Configuration – the user has access to search functionality which is defined based on a unique code (either Fund, ISIN, etc.)

- Search – Placeholder Text – enter some text to prompt the user what to search for
- Search – No Result Text – enter some text to inform the user that their search was unsuccessful
- Share Class Count – Label – enter some text to inform the user how many matching results have been found
- Share Class Count – Placeholder Text – enter count

Click Next.

Click Finish on the Summary screen.
Click the Configuration tab on the Application Details screen. This will display the app preview.

Always ensure that the Data | Context | Entity by Type | Share Class | Input Key is set to clientCode so as to enable data to pull through correctly, then click Save.
Type in a comment, then click Confirm.

Configuration

Copy & Paste JSON

If you choose to skip the Wizard, you can build an app by copying and pasting a JSON config file such as the one below into your Configuration editing screen.

With the Configuration tab selected, copy and paste the JSON below and remove the extra pair of curly brackets.

Replace the word USE YOUR OWN TOKEN HERE with the token applicable to your client instance.

    {
  "components": {
    "app": {
      "gridProps": {
        "breakpoints": [
          {
            "modifier": "up",
            "props": {
              "grid": {
                "rows": [
                  {
                    "columns": [
                      {
                        "components": [
                          {
                            "grid": {
                              "rows": [
                                {
                                  "columns": [
                                    {
                                      "components": [
                                        {
                                          "key": "heading"
                                        }
                                      ]
                                    }
                                  ]
                                },
                                {
                                  "columns": [
                                    {
                                      "components": [
                                        {
                                          "key": "definition.list"
                                        }
                                      ]
                                    }
                                  ]
                                }
                              ]
                            }
                          }
                        ],
                        "style": {
                          "flex": {
                            "basis": "60%"
                          }
                        }
                      },
                      {
                        "components": [
                          {
                            "key": "capabilities"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "columns": [
                      {
                        "components": [
                          {
                            "key": "dropdown"
                          }
                        ],
                        "style": {
                          "flex": {
                            "basis": "25%"
                          },
                          "margin": {
                            "right": "40px"
                          }
                        }
                      },
                      {
                        "components": [
                          {
                            "key": "search",
                            "props": {
                              "displayPill": true
                            }
                          }
                        ],
                        "style": {
                          "flex": {
                            "basis": "75%"
                          }
                        }
                      }
                    ]
                  }
                ]
              }
            },
            "size": "medium"
          }
        ]
      }
    },
    "capabilities": {
      "query": {
        "code": "combined_capability",
        "entityType": "CLSS",
        "queryOptionsType": "property"
      }
    },
    "definitions": {
      "props": {
        "itemSeparator": "|",
        "items": [
          {
            "definition": "isin",
            "term": "ISIN"
          }
        ],
        "termSuffix": ":"
      }
    },
    "dropdown": {
      "dataEntitiesId": "dropdown",
      "placeholder": "Select a shareclass",
      "resultItemLabel": {
        "queryOptionsType": "none",
        "subQueries": [
          {
            "code": "share_class_name",
            "entityType": "CLSS",
            "queryId": "className",
            "queryOptionsType": "property"
          }
        ],
        "value": "{sub:className}"
      }
    },
    "heading": {
      "props": {
        "subTitle": "",
        "title": "Kapital XYZ Fund"
      }
    },
    "search": {
      "props": {
        "iconPosition": "left",
        "minCharacterTrigger": 3,
        "onChangeMillisecondTimeout": 500,
        "placeholder": "Search by ISIN"
      },
      "secondaryProps": {
        "dataEntitiesId": "search",
        "noResultText": "No matching results - please try another search",
        "resultItemLabel": {
          "left": [
            {
              "code": "share_class_name",
              "entityType": "CLSS",
              "queryId": "className",
              "queryOptionsType": "property"
            }
          ],
          "right": [
            {
              "code": "isin",
              "entityType": "CLSS",
              "queryId": "className",
              "queryOptionsType": "property"
            }
          ]
        },
        "shareClassCount": {
          "label": "{count} share classes match your search",
          "placeholder": "count"
        }
      }
    }
  },
  "culture": {
    "base": "en-GB",
    "default": "en-GB"
  },
  "data": {
    "context": {
      "entities": [
        {
          "id": "search",
          "inputs": [
            {
              "key": "fundList",
              "query": {
                "key": "fundList",
                "queryOptionsType": "input"
              }
            }
          ],
          "requestBody": {
            "fundList": [
              "{input:fundList}"
            ],
            "identifierSearch": {
              "fuzzy": false,
              "properties": [
                "share_class_name",
                "isin"
              ],
              "value": "{input:term}"
            },
            "include": {},
            "limit": 10,
            "preserveOriginal": true,
            "sort": [
              {
                "direction": "ASC",
                "key": "share_class_name"
              },
              {
                "direction": "ASC",
                "key": "isin"
              }
            ],
            "type": "CLSS"
          },
          "requestBodyQueries": {}
        },
        {
          "id": "dropdown",
          "inputs": [
            {
              "key": "fundCode",
              "query": {
                "code": "fund_code",
                "entityType": "CLSS",
                "queryOptionsType": "property"
              }
            },
            {
              "key": "fundList",
              "query": {
                "key": "fundList",
                "queryOptionsType": "input"
              }
            },
            {
              "key": "fundName",
              "query": {
                "code": "fund_name",
                "entityType": "CLSS",
                "queryOptionsType": "property"
              }
            }
          ],
          "requestBody": {
            "fundList": [
              "{input:fundList}"
            ],
            "identifierSearch": {
              "fuzzy": true,
              "properties": [
                "fund_code"
              ],
              "value": "{input:fundCode}"
            },
            "include": {},
            "includeProperties": [
              "fund_name",
              "share_class_name"
            ],
            "preserveOriginal": true,
            "sort": {
              "direction": "ASC",
              "key": "share_class_name"
            },
            "type": "CLSS"
          },
          "requestBodyQueries": {}
        }
      ],
      "entityByType": {
        "CLSS": {
          "clientCodeProperty": "isin",
          "include": {
            "commentaries": {}
          },
          "inputKey": "isin"
        }
      }
    }
  },
  "token": "USE YOUR OWN TOKEN HERE"
}

Change Static to Dynamic

Although a basic app has now been created, there are a number of things that need to be amended such as adding in queries to create Dynamic data, also, other elements can be added or deleted depending on a client’s needs.

Title and Sub Title

Click Components | Heading Configuration.
Click Add Element+.

Select Dynamic Inputs.
Click Save.
Click Dynamic Inputs.

Click + Create Title.
Use the dropdown to select property for Type*.
Click Add Element+.

Scroll or search to select Code and Entity Type, then click Save.
The Code will be the Data Dictionary property for Fund Name, i.e. fund_name.
Use the dropdown arrow to select CLSS for Entity Type.

Browse back to Dynamic Inputs in the navigation pane, then click Add Element+.
Select Sub Title, then click Save.

Repeat these steps for Sub Title. Click Sub Title.
Use the dropdown to select property for Type*.
Click Add Element+.

Select Code and Entity Type, then click Save.
Use the Data Dictionary property for Short Fund Name for Code, i.e. fund_short_name.
Use the dropdown list to select CLSS for Entity Type.
Click Save.

Type in a comment, then click Confirm.
To ensure that Data pulls through correctly, switch to <> (JSON) and confirm that your Data | Context | Entity by Type | inputKey is set to clientCode, not isin.

Definitions Configuration

Browse to Components, then click Definitions Configuration.
Click Add Element+.

Select Dynamic Inputs then click Save.
Click Dynamic Inputs.

Click Add Element+.
Select Items, then click Save.

Click Items.
Click Add Row+.

Click 1.No Label.
Click Add Element+.

Select Term, then click Save.
Click + Create Definition*.

Use the dropdown to select property for Type*.
Click Add Element+.
Scroll or search to select Code and Entity Type.
Click Save.

Add in the unique Data Dictionary code for the property to be displayed, e.g. bloomberg_code.
Select the matching Entity Type from the dropdown list, e.g. CLSS.
Browse back to Term.
Use the dropdown to select none for Type*. The text prompt will be static.
Click Add Element+.

Scroll or search to select Value, then click Save.
Use the dropdown for Value to select string, then enter text to describe the definition added, e.g. Bloomberg Ticker.

Browse back to Items, then repeat steps 8 to 23 to add additional properties.
Click Save.
Type in a comment then click Confirm.

Search

Search and Context Entities | 1.search work together.

First set up Context.

With the Configuration tab selected, browse to Configuration | Data | Context | Entities.
Click 1.search.

Click Request Body Static.
Click Add Element+.

Scroll or search to select Search, then click Save.
Click Identifier Search. Add in properties which will be used for filtering the search field.

Click Properties*.
Some properties are added by default. Rename them if necessary or add additional properties, by clicking Add Row+.

After adding/editing/deleting properties, browse back to Request Body Static.
This example does not use a Fund List (Segmentation list) therefore it must be deleted from the request body.
Click — to delete it.
Click Confirm to confirm the deletion.

Click Save.
Type in a comment, then click Confirm.

Browse to Configuration | Components, then click Search.
Click Static Inputs.

Amend the wording for the Placeholder if required.
Click Add Element+ to add a pill for the shareclass count.

Select Pill Properties, then click Save.
Click Pill Properties.

Use the dropdown to select left or right for the Pill Position (placement in the search field).
Click Add Element+.
Select Value, then click Save.

Leave Value blank.
Click Save.
Type in a comment, then click Confirm.

Dropdown Configuration

The Dropdown Configuration and Context | Entities | 2.dropdown section work together.

First set up Context.

With the Configuration tab selected, browse to Configuration | Data | Context | Entities.
Click 2.dropdown.

Click Request Body Static.
Click Include Properties. These are the properties that will be used to filter the dropdown list.

Amend or delete the default properties.
Click Add Row+ to add any additional properties.

Click Sort in the navigation pane.
Make sure the properties used in the sorting fields match at least one of the properties used for the Include Properties fields.

Browse back to Request Body Static.
Click Add Element+.
Select Search, then click Save.

Browse back to Request Body Static, this search does not use a Fund List (Segmentation list) to get results so this must be deleted from the Request Body.
Click — to delete Fund List.
Click Confirm to confirm your deletion.

Browse to Configuration | Components | Dropdown Configuration.
Click Result Item Label*. This will create the dropdown list return results.

Click Sub Queries. Sub Queries are used so that the dropdown list can be composed of multiple properties, e.g. Short Name – ISIN, or ISIN – Fund Code, etc. However, only 1 property is required.
Click className. The properties used in the sub query must match the properties used in the Include Properties section in the context.

Make sure the Code field contains a property that matches a property set in the Context.
Browse back to Sub Queries, then click Add Row+ to add additional properties to display in the dropdown.

Click 2. No Label.
Use the dropdown to select property for Type*.
Click Add Element+.

Select Code, Entity Type and Query Id, then click Save.
Use a different property code for Code, e.g. isin.
Use the dropdown to select an Entity Type, e.g. CLSS.
Type in a Query Id, this can be the same as the Code property.

Browse back to Result Item Label and in the Value field, add the additional Sub Query Id in curly brackets next to the first sub query. (You can separate them with a hyphen or other character as your design requires.)
Click Save.
Type in a comment, then click Confirm.

Capabilities

This feature, also known as the category pill, allows you to display, for example, the Fund Code.

Browse to Configuration | Components, then click Capabilities.
Click Query.

The Code is set to a default property, combined_capability. Type in a property Code that better represents the categorization of the funds, e.g. fund_code, then click Save.
Type in a comment, then click Confirm.

Customization

Reordering Elements

All app elements, e.g. the Fund Name and Key Fact information, etc., can be displayed in whatever order the client requires. This app uses a grid for the display

With the Configuration tab selected, browse to Configuration | Components, then click App.
Click Grid Props.

Click Breakpoints.
Click 1.No Label.

Click Configuration.
Click Grid.

Click Rows*.
Use the up or down arrows to change the order of the rows.

Rows have been swapped.
To name rows, click on each row, add an element called Name, and name it appropriately.

Rows contain Columns.
Columns can be renamed by adding an element: Name.

Click on a column to see what Components it contains.
Columns can be reordered within a row.
Rows and columns can be added or deleted, as needed.

After ordering the elements as required, click Save.
Type in a comment, then click Confirm.