K2BTools Tutorial - Exercise 11.2 - Customizing the Design System

In the last excersice, we selected a design system that was predefined. Now, we are going to customize that design system by changing a few properties inside of it.

  1. Open the design system configuration and go to "Master Page" tab.
    1. Select the "Fixed left menu".
    2. Change the application name to "K2B Tools".
    3. Disable the notifications component.
      MasterPage1
      Master Page

  2. Go to "Headers and footers" tab.
    1. Change "Object title" height to "50 px" and font to "26 px".
      ObjectTitle2
      Object Title

  3. Go to "Work With" tab.
    1. Modify "Update/Delete position" to "Top (Right)"
    2. Change "Actions position" to "Right".
    3. Set "Actions Visibility" to "OnRowHover".
      MasterPage3
      Work With

  4. Go to "Form Controls" tab.
    1. Change "Borders" property to "Rectangle".
    2. Modify "Corners" property to "Rounded Small".
      FormControls2
      Borders and Corners

  5. Go to "Form" tab and change "Field label position" property to left.
    FieldLabelPosition1
    Field label position

  6. Click on finish, wait for the changes to apply and then Build the application (F5). See the results on runtime.