App And Screen Settings

Introduction

Screen and Application settings are quick and easy way to set or change UI / design theme of the application. You can set design theme or change few of properties for all labels or buttons or navigation bar etc which are available on current screen or entire application.

During development phase, if you want to modify color or font style or size then it would be easy to change the theme of existing controls. For example, if you want to increase the font size of all labels to 15px from 13px for current screen then using this panel, you can achieve it with single value change and you need not require to go through each label of the screen. The same thing is applicable for Application settings and it will apply on all labels available on all screens of application.

Lets check which properties of controls can be changed quickly as part of Screen level design settings.

Screen Settings

  1. Apply to Existing Controls

    At the time of saving the changes, you can decide that you want to apply these property settings on existing controls also or only for the new controls to be added. Default is to be applied on new controls.

    If you decide to apply on existing controls then you have freedom to apply only changed properties or all properties on existing controls. It means if you change only Font size then only that will be affected on existing controls and other properties will not be affected of existing controls.

  2. Text Property

    For text related settings, you can configure Font Face, Font Size, Color (text color) properties and it will be applied on all text controls like Label.

  3. Button

    For Button controls, you can set Background color, Font face, Font size, title color and Button image properties. You can set all of these properties for all 4 states of Buttons - Normal, Selected, Highlighted & Disabled.

  4. Picker

    For all Picker controls, you can set Toolbar title color, Toolbar tint color, Bar button tint color properties.

Do not forget to save the settings/changes using “Save” button on right side.

Application Settings

Just like screen settings, which applies the changes on current screen only, Application settings work on all screens of application. Whatever changes you made it will be applicable on all selected properties of selected controls of all the screens.

  1. Apply to Existing Controls

    This option works just like Screen settings panel. At the time of saving the changes, you can decide that you want to apply these property settings on existing controls also or only for the new controls to be added. Default is to be applied on new controls.

    If you decide to apply on existing controls then you have freedom to apply only changed properties or all properties on existing controls. It means if you change only Font size then only that will be affected on existing controls and other properties will not be affected of existing controls.

  2. Navigation
    • Base Navigation Bar - For base navigation bar, you can set background color and Background Image property.
    • Navigation Button - Just like normal button, for Navigation button, you can set Background Color, Font Face, Font Size, Title color and button image. You can set these properties for different button state - Normal, Selected, Highlighted, Disabled.
    • Navigation Label - You can set Font face, Font size and color for Navigation Label control.
  3. Text Property

    For text related settings, you can configure Font Face, Font Size, Color (text color) properties and it will be applied on all text controls like Label.

  4. Button

    For Button controls, you can set Background color, Font face, Font size, title color and Button image properties. You can set all of these properties for all 4 states of Buttons - Normal, Selected, Highlighted & Disabled.

  5. Page Settings

    You can change Background color as well as Tint color for the same using this.

  6. Picker

    For all Picker controls, you can set Toolbar title color, Toolbar tint color, Bar button tint color properties.

Do not forget to save the settings/changes using “Save” button on right side.