---
# System prepended metadata

title: UI Configuration

---

# UI Configuration


# Root Configurtaion

```json
{
  "menu": {
   ...
  },
  "entities": [
    ...
  ]
}
```

## Entity Confuguration

All entities must have at least one display and search configuration.

```json
{
  "entities": [
    {
      "name": "consent",
      "display": {
      ...
      },
      "search": {
      ...
      }
    }
  ]
}

```

* **name** is identifies entity name.


> Wireframe of Entity Display Layout

```plantuml

@startsalt
{+
    {^"Sumary Area"
    This placeholder include **summary-template** view of record
    .
    .
    .
}
{+
{/ <b>Tab 0 | Tab 1 | Tab 2 | History }
{
{^"Info Area"
    This placeholder can include **template** for record view
    This placeholder can include **display** layout of any referenced record for full render (inclding detail tabs, history etc.)
     This placeholder can include **search** layout for 1-to-N scenarios.
    .
    .
    .
    .
}
{^"Workflow Transitions Area"
    { State in: **Active** | ^Suspend^ |  <color:green>State in active and one of transition is Suspend}
    
    { Reset Password in **Waiting Approval** | ^Approve^ |  <color:green>Running another worklfow with Waiting Approval State}
    {Available Workflows: | ^Change Phone Number - Start^}
    .
    .
}

}
[Close]
}
}
@endsalt

```

### Display Configuration

```json
{
  "display": {
    "url": "https://...../consents/@id",
    "layouts": [
      {
        "name": "default",
        "default": true,
        "title": {
          "tr-TR": "Kullanici Rizasi",
          "en-EN": "User Consent"
        },
        "summary-template": {
          "tr-TR": "bo-consent-display-summary-tr",
          "en-EN": "bo-consent-display-summary-en"
        },
        "history": true,
        "state-manager": true,
        "running-workflows": true,
        "availbale-workflows": true,
        "tabs": [
          {
            "type": "render",
            "entity": "consent",
            "order": 0,
            "id": "$.id",
            "template": {
              "tr-TR": "bo-consent-display-default-tr",
              "en-EN": "bo-consent-display-default-en"
            },
            "title": {
              "tr-TR": "Riza Detaylari",
              "en-EN": "Consent Details"
            }
          },
          {
            "type": "search",
            "entity": "token",
            "layout": "default-for-consent",
            "order": 1,
            "filter": "consentId",
            "fitler-value": "$.consent.id",
            "title": {
              "tr-TR": "Anahtarlar",
              "en-EN": "Tokens"
            }
          },
          {
            "type": "display",
            "entity": "user",
            "order": 2,
            "id": "$.user.id",
            "layout": "minimal",
            "title": {
              "tr-TR": "Kullanici",
              "en-EN": "User"
            }
          }
        ]
      }
    ]
  }
}
```
* **url** is raw data supplier service of entity.
* **layouts** are view definitions of entity for different requirements.


#### Layout
```json
{
  "layouts": [
    {
      "name": "default",
      "title": {
        "tr-TR": "Ozet Gorunum",
        "en-EN": "Compact View"
      },
      "summary-template": {
        "tr-TR": "bo-consent-display-summary-tr",
        "en-EN": "bo-consent-display-summary-en"
      },
      "history": false,
      "state-manager": false,
      "running-workflows": false,
      "availbale-workflows": false,
      "tabs": []
    }
  ]
}

```
* **name** layout definition key to refer to other entity layouts
* **summary-template** view info based on record data for summary field
* **history** displays records workflow transitions history logs
* **state-manager** show current transitions in the record's state manager workflow
* **running-workflowss** shows the record's current running workflows and current migrations
* **tabs** record's related informations.

## Search Confuguration


https://...../consents?keyword=@value&page=@page&pagesize=@pagesize&@filter=@filtervalue
```json
{
  "search": {
    "url": "https://...../consents,
    "new": {
      "workflow": "consent-state-manager",
      "transiton": "create-consent"
    },
    "prefetch": {
      "load-on-open": false,
      "keyword": ""
    },
    "filters": [
      {
        "name": "userid",
        "type": "reference",
        "reference": {
          "entity": "user",
          "layout": "reference-search-user"
        },
        "title": {
          "tr-TR": "Kullanici",
          "en-EN": "User"
        }
      },
      {
        "name": "clientid",
        "type": "reference",
        "reference": {
          "entity": "client",
          "layout": "reference-search-client"
        },
        "title": {
          "tr-TR": "Istemci",
          "en-EN": "client"
        }
      },
      {
        "name": "issuedAt",
        "type": "datetime",
        "title": {
          "tr-TR": "Aktive Olus Tarihi",
          "en-EN": "Issued At"
        }
      }
    ],
    "layouts": [
      {
        "name": "default",
        "allow-new": true,
        "allow-filters": true,
        "allow-search": true,
        "allow-select": true,
        "title": {
          "tr-TR": "Ozet Gorunum",
          "en-EN": "Compact View"
        },
        "type": "grid",
        "columns": [
          {
            "path": "$.user.name",
            "title": {
              "tr-TR": "Adi",
              "en-EN": "Name"
            }
          },
          {
            "path": "$.user.last",
            "title": {
              "tr-TR": "Soyadi",
              "en-EN": "Surname"
            }
          },
          {
            "path": "$.clinet.name",
            "title": {
              "tr-TR": "Uygulama",
              "en-EN": "Client"
            }
          }
        ]
      },
      {
        "name": "reference-search-consent",
        "allow-new": false,
        "allow-searh": true,
        "allow-filters": false,
        "allow-select": true,
        "title": {
          "tr-TR": "Ozet Gorunum",
          "en-EN": "Compact View"
        },
        "type": "grid",
        "columns": [
          {
            "path": "$.concat($.firstName,' ',$.lastName)",
            "title": {
              "tr-TR": "Kullanici",
              "en-EN": "Full Name"
            }
          }
        ]
      },
      {
        "name": "default-card",
        "title": {
          "tr-TR": "Kart Gorunumu",
          "en-EN": "Card View"
        },
        "type": "card",
        "headline": "$.concat($.firstName,' ',$.lastName)",
        "subhead": "$.client.name",
        "supporting-text": "$.concat($.scope.name,'-',$.scope.reference)",
        "image": ""
      }
    ]
  }
}

```

## Menu Configurtaion
```json
 "items": [
      {
        "type": "group",
        "title": {
          "tr-TR": "Yetkilendirme",
          "en-EN": "IDM"
        },
        "items": [
          {
            "type": "entity",
            "entity": "user",
            "search-layout": "full",
            "display-layout": "compact",
            "title": {
              "tr-TR": "Kullanicilar",
              "en-EN": "Users"
            }
          },
          {
            "type": "entity",
            "entity": "consnet",
            "search-layout": "full",
            "display-layout": "compact",
            "title": {
              "tr-TR": "Rizalar",
              "en-EN": "Consents"
            }
          },
          {
            "type": "divider"
          },
          {
            "type": "entity",
            "entity": "client",
            "search-layout": "full",
            "display-layout": "compact",
            "title": {
              "tr-TR": "Istemciler",
              "en-EN": "Clients"
            }
          }
        ]
      }
    ]

```

Menu node includes all configuration items for side navigator.

Item can include items for tree style navigation configuration.

Items can configure as three types. 
* **group** : Groups have a header and chield activities and also group items cannot clicked for navigation.
* **divider** : Creates just a divider between items.
* **entity** : Menu item that opens item listing and detail panels.
    * entity item must inlude entity name, search layout(s) and display layout(s) of entity
