grpl ui components props – 0.2.8

There are many properties defined to customize and manage the UI components per your host application requirement and needs.

Webpack Configuration

First, start by configuring your host webpack.config.js files plugin section as follows:

webpack.config.js

...
plugins: [
...
new ModuleFederationPlugin({
  name: "host app name",
  filename: "remoteEntry.js",
  remotes: {
  // Change the remote name to match the exposed module's name
  // "c2xsbclassicmodelsclassicmodelsas" is the name of the exposed module
  host: 'c2xsbclassicmodelsclassicmodelsas@https://c2x-sb-classicmodels-classicmodels-as-ui.nop.cloud20x.com/remoteEntry.js'
  }
})
...
]
...

How to Import Modules and Pass Props

let el1;
import("host/Orders/find").then((module) => {
  const Count = module.default;
  new Count({
    target: el1,
    props: {
    ....
    },

  });
});

Available Properties

props: {
dateFormat: 'DD.MM.YYYY - HH:mm',
css: "font-size: 1vw; min-width: 8rem; padding:0.1rem; color: orange;  font-weight: bold; border-color: orange; ",
enableFilter: true,
enableLoadMore: false,
filter: {
   "limit":2,
   "where": {"customerNumber":363}
},
translation: {
  "orderNumber": "Bestellung",
  "orderDate": "Bestelldatum",
  "Shipped": "Ausgeliefert",
  "Filter": "Filtern",
  "status": "Status",
  "customerNumber": "Kunde",
  "Load More": "weitere..."
  },
...
}

Date Format

This property formats date according to the string passed. Any string you pass here should be in the form of day.js library.

Usage:

props: {
...
dateFormat: 'DD.MM.YYYY - HH:mm',
...
}

CSS

Any inline-css that you pass to this props will be applied to the outermost div of the imported module.

Usage:

props: {
...
css: "font-size: 1vw; min-width: 8rem; padding:0.1rem; color: orange;",
...
}

Archive Table

If this prop is passed an Archive functionality is enabled and it uses the name of the field passed to move records from the current table to the passed table.

Usage:

props: {
...
archiveTable: "ArchivedRapports",
...
}

Enable Filter

This will enable a filter button for the imported module.

Usage:

props: {
...
enableFilter: true,
...
}

Enable Load More

This will make loadmore button appear for the imported module

Usage:

props: {
...
enableLoadMore: true,
...
}
default value is set to true

Filter

This filter props will be applied to the data that’s being fetched from the API. This object is directly appended to the final request and if any “and” filters are used it will be merged with any already existing “and” filter. This filter can not be removed/changed by the user after the page is loaded.

Usage:

props: {
...
filter: {
   "limit":2,
   "where": {"customerNumber":363}
},
...
}

Default Filter

This filter props is applied to the page’s filter functionality at the first time the page is loaded and can be either removed or changed by the user after the page is loaded.

Usage:

props: {
...
defaultFilter: {
  date: {
    lt: dayjs().format(),
    gt: dayjs().startOf("month").subtract(2, "month").format(),
  },
},
...
}

Quick Filter

This filter props accepts an array of a set of filters which can be applied to the page easily to get a filtered result on the page.

Usage:

props: {
...
quickFilters: [
  {
    label: "This Month",
    filter: {
      and: [
        {
          date: {
            lt: dayjs().endOf("month"),
          },
        },
        {
          date: {
            gt: dayjs().startOf("month"),
          },
        },
      ],
    },
  },
]
...
}

Translation

This props will translate column names to the translation file provided. It can also be used to rename column names.

Usage:

props: {
...
translation: {
  "status": "Status",
  "customerNumber": "Kunde",
  "Load More": "weitere..."
},
...
}

The following props should be wrapped inside the schema object

Action

This property includes details about the action view that will be used before the action is fired; at the moment, the edit view is supported for the action props.

Usage:

props: {
...
schema: {
...
actions: {
  edit: {
    removable: true,
    "with-confirmation": true,
  },
},
...
}
...
}

Removable

Removable’s default value is true, which causes the edit view’s remove button to appear. By passing the value here, you may turn on/off the visibility.

Usage:

props: {
...
schema: {
...
actions: {
  edit: {
    removable: true,
    "with-confirmation": true,
  },
},
...
}
...
}

With-confirmation

This property’s default value is true, which will display a confirmation dialog box before the action is carried out. If you enter false, however, the operation will be carried out without any confirmation.

Usage:

props: {
...
schema: {
...
actions: {
  edit: {
    removable: true,
    "with-confirmation": true,
  },
},
...
}
...
}

Visibility

This property determines whether users may modify table values or if the table is read-only.

Usage:

props: {
...
schema: {
...
visibility: {
  readOnly: true,
  message: "Bitte Kunden-Daten in Bexio bearbeiten.",
},
...
}
...
}

Custom Bulk Actions

This props contains a function with an action name to execute against selected rows. The function return type should be an array of Promise.

Usage:

props: {
...
schema: {
...
"custom-bulk-actions":[
  {
    action: "Action 1",
    bulkFn: (ids:string[])=>{
      // this will update the value for col-name to Action 1 for all the selected ids
      let results = ids.map(async(id)=>{
        const res = fetch(`URL/${id}`,{
          method: "PATCH",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            colname: "Action 1"
          })
        })
        // handle errors here based on res value
      })
      return results
    },
    singleFn: (row) => {
      console.log(row);
    },
  },
],
...
}
...
}

Field Properties Props

This props object contains all the field attributes props needed to transform a field into a desired or customized view output.

Boolean Fields

This tells the view that these fields should be shown as checkboxes by including an array of their field names or database column names.

Usage:

props: {
 ...
 schema:{
  ...
  "field-properties":{
   ...
   "boolean-fields": ["col-name1","col-name2",".."]
  }
 }
}

Hidden Fields

If you want to conceal some database columns from the user’s view, supply the column name using this prop. Some database columns may not be intended to be seen on the user interface.

Usage:

props: {
 ...
 schema:{
  ...
  "field-properties":{
   ...
   "hidden-fields": ["col-name1","col-name2",".."]
  }
 }
}

Auto Generated Fields

If you have some database columns that are auto-generated, you can pass the column name using this prop, and it will remove the field from the user’s view or make the field grayed out, so the user won’t interact with it other than viewing and won’t be available for any manipulation of the auto-generated data.

Usage:

props: {
 ...
 schema:{
  ...
  "field-properties":{
   ...
   "auto-generated-fields": ["token"]
  }
 }
}

Additional Sorting Rules

This prop accepts an array of ordering parameters in the format of <“field name” “ASC|DESC”>. More information can be found in the loopback documentation. Any additional sorting done by the user after the page is loaded is appended to the list passed here.

Usage:

props: {
 ...
 schema:{
  ...
  "field-properties":{
   ...
   "additional-sorting-rules": ["id ASC"]
  }
 }
}

Custom Validations

This prop accepts an array that can be used to add additional custom validation rules using regex. You can also pass a message which can be shown if the validation fails.

Usage:

props: {
 ...
 schema:{
  ...
  "field-properties":{
   ...
   "custom-validations": [
      {
        field: "trainingsdauer",
        validation: {
          message: "Trainingsdauer can't be empty",
          regex: ".*\.*",
        },
      },
    ],
  }
 }
}

Color Fields

This prop is used to force a field to use a color component for both an input and also just to show. In the database, it is saved as a string (hex), but in the UI, it uses the native HTML color input. It also accepts a showOn property whose values can be “background” | “font” | “border”.

Usage:

props: {
 ...
 schema:{
  ...
  "field-properties":{
   ...
   "color-fields": [
      {
        field: "color",
        showOn: "background"
      },
    ],
  }
 }
}

Date Fields

This prop specifies which columns should be shown on the user interface as date fields.

Usage:

props: {
 ...
 schema:{
  ...
  "field-properties":{
   ...
   "date-fields": [
     {
       name: "column-name1",
       type: "date"
     },
     {
       name: "column-name2",
       type: "time"
     }
     ...
     ]
  }
 }
}

Dropdown Fields

This prop defines which columns should be rendered as a dropdown on the UI.

Usage:

props: {
 ...
 schema:{
  ...
  "field-properties":{
   ...
   "dropdown-fields": [
     {
       name: "column-name1",
       default: {
         label: "label",
         value: "value"
       },
       options:[
         {
           label: "label",
           value: "value"
         }
       ]
     },
     ...
    ]
  }
 }
}

Textarea Fields

This prop specifies which columns should be shown as textareas by including a string array of field names or column names.

Usage:

props: {
 ...
 schema:{
  ...
  "field-properties":{
   ...
   "textarea-fields": ["col-name1","col-name2",".."]
  }
 }
}

Relational Fields

In order to minimize the amount of scrolling required to choose an item from the choice list, this property specifies which relational fields should be presented as grouped items inside dropdown menus. When a user favorites an item, that item will be pinned at the top of the dropdown menu.

Note	For the fuzzySearch functionality to work there needs to be an extra endpoint with the operation id of “Fuzzy {ObjectName}.fuzzySearch”.

Usage:

props: {
 ...
 schema:{
  ...
  "field-properties":{
   ...
   "relational-fields": [
     {
       name: "column-name1",
       type: "FAVORITE",
       editable: false,
       columns: ["col-1", "col2-", "col-3"], // dropdown will be filtered and shown as the order passed here
       useFuzzySearch: boolean  //defaults to false
       useDropDownWithOutSearch: boolean //defaults to false
     },
     {
       name: "column-name2",
       type: "DEFAULT",
       editable: true,
       useFuzzySearch: boolean,  //defaults to false
       useDropDownWithOutSearch: boolean //defaults to false
     },
     ...
     ]
  }
 }
}

JSON Fields

This prop accepts a list of fields which should be rendered as JSON and also validates the field to be a valid JSON before updating.

Usage:

props: {
 ...
 schema:{
  ...
  "field-properties":{
   ...
   "json-fields": [
     {
       field: "address",
       template: "${street}, ${zip} ${city}"
     },
     ...
     ]
  }
 }
}

Field Transformation

The props contain a column name and a transformation function to transform the column value to a new custom value. There is also access to the corresponding row if the transformation function needs it.

Usage:

props: {
 ...
 schema:{
  ...
  "field-properties":{
   ...
   "field-transformation": [
     {
       name: "column-name",
       transformation: (value: string, row: any) => {
         return 'transformed..'+value;
       },
     },
     ...
     ]
  }
 }
}

If your host application has a form component, you may use this method to convert field input values or even validate input values.

Default Filter

This prop sets the set of filters automatically when the admin page is opened. It can be easily cleared like when a filter is normally applied. The syntax is like a normal filter except for the “date” input types where we need to specify both the start and end dates.

Usage:

props: {
...
defaultFilter: {
  date: {
    lt: dayjs().format(),
    gt: dayjs().subtract(7, "day").format(),
  },
},
...
}

Quick Filters

This prop is used to set named sets of filters for the admin view. It can be found below the filter properties in the filter popup. The filter syntax for quick filters is also the same as “defaultFilter” where only “date” fields need both the start and end values.

Usage:

props: {
...
quickFilters: [
  {
    label: "GetRapportsForTrainerChrista",
    filter: {
      trainerId: 3,
    },
  },
],
...
}

useSingleSelectForRelationalDropdown

This prop is to change the relational dropdown found in the filter view from “multi-select” to “single-select” component.

Usage:

props: {
...
useSingleSelectForRelationalDropdown: true
...
}