Customizing a design system object provided by K2BTools

Design system objects can be used from version 13.2 onwards. Developers may wish to customize the design system object to tweak the UI to their client's needs. As a separate process, K2BTools updates the definition of the design system objects when a new version is installed in the KB. This is necessary to implement new features included in the new version, and to implement bugfixes/improvements.

The design system object includes a feature that makes this process much simpler, using the import rule. Using this rule developers can create new design systems and reference other design systems in their definition.

We suggest using this feature when customizing the design systems offered by K2BTools as follows:

  1. Check if that customization is available in the Design System Configuration wizard. If so, use the wizard and disregard the following steps.
  2. If further customization is required, create a new Design System Object and:
    1. In the Styles part, add an import rule referencing the design system object provided by K2BTools
      K2BOrionCustomDS_ImportRule
      Importing K2BOrionDS

      . In the created desing system object set Base Css property to Bootstrap v3
    2. Set the Design system as the Default Style in the KB. This may involve the Default Style property in the KB Version configuration and the Responsive Theme properties in K2BTools General Settings and K2BWebPanelDesignerSettings.
      K2BOrionCustomDS_KBStyle
      Setting KB Style property

      K2BOrionCustomDS_GeneralSettings
      Setting Responsive Theme general settings property

      K2BOrionCustomDS_WebPanelDesignerSettings
      Setting Responsive Theme WebPanelDesigner general settings property

    3. Customize the design system modifying styles and tokens in newly created object. DO NOT modify the design system object provided by K2BTools.

Using this procedure, when the design system is updated by K2BTools the user defined design system will be left unchanged. This does not guarantee that the UI will work perfectly in all cases, so the developer should do some light testing on the UIs affected by changes in their custom Design System.

Even if minor changes are required, we expect the upgrade process to be simplified as the developer can see clearly which changes were done on the design system and focus on those.