Using a custom frontend-config.js with Navigator

Could any of you explain to me what exactly means the sort/field and the columns/key field in the frontend-config.js?

I’ve read the relevant part of the documentation (Customizable table views), but it’s not explained there, the following snippet is from the docs:

export const customViews = (userId, party, role) => ({
  customview1: {
    type: "table-view",
    title: "Filtered contracts",
    source: {
      type: "contracts",
      filter: [
        {
          field: "id",
          value: "1",
        }
      ],
      search: "",
      sort: [
        {
          field: "id",
          direction: "ASCENDING"
        }
      ]
    },
    columns: [
      {
        key: "id",
        title: "Contract ID",
        createCell: ({rowData}) => ({
          type: "text",
          value: rowData.id
        }),
        sortable: true,
        width: 80,
        weight: 0,
        alignment: "left"
      },
2 Likes

Great question, the docs appear to have gotten a bit out of date here or at least confusing. I’ll try to get them updated.

The field is a cursor into daml/Model.scala at 2903987a61c75432d028d0ee6e4ab6709cb1eaa0 · digital-asset/daml · GitHub with fields separated by dots. So id corresponds to the contract id, argument corresponds to the create argument of the contract and template.id corresponds to the template id.

value is a string that is matched against the value of the cursor. I believe this is always a string contains query so "1" will match 12 even for an integer. (There is no regex support here).

So your example above will match contract ids containing 1 and sort them in ascending order by contract id. That is arguably a pretty useless example.

For something more meaningful, I recommend looking at the Java quickstart example. That example filters contracts of a specific template by a given party.

2 Likes

Perfect, thank you!