Skip to main content

Settings.yaml

Settings.yaml is a file that helps you manage some settings within your shell application. This file is created automatically when you create your shell application.

THEME SETTINGS​

​ The csspath field in the file allows you to use different themes in your application. You can create and customize as many themes as you want under csspath. however, the theme named "default" must be set and should not be deleted. This theme is the default theme of your application and it is the theme that you give the css you will use when the application is first opened. Unless you change the theme, the "default" theme will be valid on your screens.

​ You can add a theme with the name you want under csspath (like compact, dark, dark-compact in figure). Under the themes, you need to give the css file location(s) of which you want to be valid for that specific theme in your shell application as a string value.

You can call setTheme method as Quick.theme.setTheme(themeName:string) in the events for changing theme. Quick.theme.setTheme("compact")

Example of direct path of GoldenLayout, DxDataGrid and DxTreeList component theme files

cssPath:
  default: 
    - /static/css/main.css
    - https://golden-layout.com/files/latest/css/goldenlayout-base.css
    - https://golden-layout.com/files/latest/css/goldenlayout-light-theme.css
    - https://cdn3.devexpress.com/jslib/22.1.5/css/dx.common.css    
    - https://cdn3.devexpress.com/jslib/22.1.5/css/dx.light.css
  compact: 
    - /static/css/myHappyTheme1.css
    - https://golden-layout.com/files/latest/css/goldenlayout-base.css
    - https://golden-layout.com/files/latest/css/goldenlayout-light-theme.css
    - https://cdn3.devexpress.com/jslib/22.1.5/css/dx.common.css    
    - https://cdn3.devexpress.com/jslib/22.1.5/css/dx.light.compact.css
  dark:
    - /static/css/myDarkTheme.css
    - https://golden-layout.com/files/latest/css/goldenlayout-base.css
    - https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css
    - https://cdn3.devexpress.com/jslib/22.1.5/css/dx.common.css    
    - https://cdn3.devexpress.com/jslib/22.1.5/css/dx.dark.css
  dark-compact:
    - /static/css/myDarkTheme.css
    - https://golden-layout.com/files/latest/css/goldenlayout-base.css
    - https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css
    - https://cdn3.devexpress.com/jslib/22.1.5/css/dx.common.css    
    - https://cdn3.devexpress.com/jslib/22.1.5/css/dx.dark.compact.css

Example of relative path of GoldenLayout, DxDataGrid and DxTreeList component theme files. You must download the GoldenLayout and devexpress css files and add them to your project. And you should also download and add devexpress icon files to "static/css/icons" folder. css.zip

cssPath:
  default: 
    - /static/css/main.css
    - /static/css/goldenlayout-base.css
    - /static/css/goldenlayout-light-theme.css
    - /static/css/dx.common.css
    - /static/css/dx.light.css
  compact: 
    - /static/css/myHappyTheme1.css
    - /static/css/goldenlayout-base.css
    - /static/css/goldenlayout-light-theme.css
    - /static/css/dx.common.css  
    - /static/css/dx.light.compact.css
  dark:
    - /static/css/myDarkTheme.css
    - /static/css/goldenlayout-base.css
    - /static/css/goldenlayout-dark-theme.css
    - /static/css/dx.common.css 
    - /static/css/dx.dark.css
  dark-compact:
    - /static/css/myDarkTheme.css
    - /static/css/goldenlayout-base.css
    - /static/css/goldenlayout-dark-theme.css
    - /static/css/dx.common.css   
    - /static/css/dx.dark.compact.css

ROOT QJSON​

root.qjson parameter is used to specify the opening page of your application. You should give the file location of the qjson which will be displayed on the first screen of your application.

ROOT LANGUAGE CODE​

QUICK has multi-language support. Thus, you should specify which language will be applied as default by setting rootLangCode parameter.

ALERT / PIPELINE / LOADING QJSONS​

Alert qjson: You can use the Quick alert mechanism to display error and warning messages on your application basis and customize your own alert structure. To activate your own alert box, you should set your alert.qjson file location lo alertqjson parameter.

Pipeline qjson: All service calls made in your QUI shell application pass through the events in the pipeline.qjson file. Thanks to these events, you can intervene in service calls and make arrangements in them. When you created you pipeline.qjson, you should set the pipelineqjson parameter giving your pipeline.qjson file path.

Loading qjson: You can use and customize the Loading structure that will be shown on page when loading occurs on the screens. If you created your own loading structure, you should set loadingqjson parameter with related qjson file location.

REGIONAL DEFINITIONS​

You can provide different formats for values, such as date, time and money formats, for different region (language) settings within your application. To apply these formats, you should set related parameters under each region of RegionalDefinitions in settings.yaml. For example, if you want your display date format as dd/mm/yyyy for Turkish, you should set the value of displayDateFormat under region:tr as 'dd/MM/yyyy'.

ENVIRONMENT​

Quick.environment has been added to take fields from settings.yaml . You can define any value related to the application with envirement and access this value from the page.

quick.Quick.environment.variable["test1"] : any

image

image

image