Oqtane Tutorials
Oqtane Tutorials

Advanced Settings and Automation

Tutorial Home › Settings and Automation
Custom Dynamic DataSources - Data Relationships
#1 Settings in 2sxc
Use PageService.Activate Features like JS/CSS

Settings in 2sxc

Settings allow your code to use predefined settings across all apps and sites. And they allow you to overide a setting at any level of the application. You can read more about the settings in the docs 📕.

The samples can differ based on your Razor base class or if you're running an old version.
Switch to Typed (2sxc 16+) Selected: Dynamic (Razor14 or below)

Get Settings from View or App

The following settings were configured on this View - see docs

⬇️ Result | Source ➡️

  •   Settings.PrimaryColor
    #8BC34AD9
  •   Settings.SecondaryColor
    #00BCD4B3
  • Settings.Tiles
    (for example to configure images side-by-side): 
@inherits Custom.Hybrid.Razor14
<ul>
  <li>
    @{ var colorPri = Settings.Get("PrimaryColor"); }
    <div style='background-color: @colorPri' class="color-box"></div>
    &nbsp; Settings.PrimaryColor <br>
    @colorPri
  </li>
  <li>
    @{ var colorSec = Settings.Get("SecondaryColor"); }
    <div style='background-color: @colorSec' class="color-box"></div>
    &nbsp; Settings.SecondaryColor <br>
    @colorSec
  </li>
  <li>
    Settings.Tiles <br>
    (for example to configure images side-by-side):
    @Settings.Tiles
  </li>
</ul>

<style> .color-box { width: 20px; height: 20px; float: left; } </style>

The following settings were configured on this App - see docs

⬇️ Result | Source ➡️

  •   App.Settings.PrimaryColor
    #8BC34AD9
  •   App.Settings.SecondaryColor
    #00BCD4B3
  •   App.Settings.QrForegroundColor
    #000000
  •   App.Settings.QrBackgroundColor
    #FFFFFF
  • App.Settings.QrDimension
    200 
@inherits Custom.Hybrid.Razor14
<ul>
  <li>
    @{ var colorPri = App.Settings.Get("PrimaryColor"); }
    <div style="background-color: @colorPri" class="color-box"></div>
    &nbsp; App.Settings.PrimaryColor <br>
    @colorPri
  </li>
  <li>
    @{ var colorSec = App.Settings.Get("SecondaryColor"); }
    <div style="background-color: @colorSec" class="color-box"></div>
    &nbsp; App.Settings.SecondaryColor <br>
    @colorSec
  </li>
  <li>
    @{ var colorQrF = App.Settings.Get("QrForegroundColor"); }
    <div style="background-color: @colorQrF" class="color-box"></div>
    &nbsp; App.Settings.QrForegroundColor <br>
    @colorQrF
  </li>
  <li>
    @{ var colorQrB = App.Settings.Get("QrBackgroundColor"); }
    <div style="background-color: @colorQrB" class="color-box"></div>
    &nbsp; App.Settings.QrBackgroundColor <br>
    @colorQrB
  </li>
  <li>
    App.Settings.QrDimension <br>
    @App.Settings.Get("QrDimension")
  </li>
</ul>

<style> .color-box { width: 20px; height: 20px; float: left; } </style>

Settings Stack

Global and local settings are merged together, so you can access them no matter where they were defined. 

This demo app will be installed on many sites which don't have any settings, so there is no code to demo this.

⬇️ Result | Source ➡️

  • Settings.Images.Content.Width
    1400
  • Settings.Images.Content.AspectRatio
    1.618 
@inherits Custom.Hybrid.Razor14
<ul>
  <li>
    <code>Settings.Images.Content.Width</code> <br>
    @Settings.Get("Images.Content.Width")
  </li>
  <li>
    <code>Settings.Images.Content.AspectRatio</code> <br>
    @Settings.Get("Images.Content.AspectRatio")
  </li>
</ul>

Settings are stacked in a way that the View-settings have a higher priority than App-settings, which has a higher priority than Site, etc. In rare cases you may want to explicitly check for a setting at a specific place in the stack.

This example has a setting called CustomColor which is set at App and View level. Using GetSource(...) we can access a specific source.

⬇️ Result | Source ➡️

  •   Settings.Get("CustomColor"): #E91E63F2
  •   View...Get("CustomColor"):
  •   App...Get("CustomColor"): #E91E63F2
  •   Site...Get("CustomColor"):
    Note: this will be empty, as Site doesn't have this setting
  •   Global...Get("CustomColor"):
    Note: this will be empty, as Site doesn't have this setting 
@inherits Custom.Hybrid.Razor14
<ul>
  <li>
    <div style='background-color: @Settings.Get("CustomColor")' class="color-box"></div>
    &nbsp; <code>Settings.Get("CustomColor")</code>:
    @Settings.Get("CustomColor") 
  </li>
  <li>
    @{ var source = Settings.GetSource("ViewCustom"); }
    <div style='background-color: @source.Get("CustomColor")' class="color-box"></div>
    &nbsp; <code>View...Get("CustomColor")</code>:
    @source.Get("CustomColor")
  </li>
  <li>
    @{ source = Settings.GetSource("AppCustom"); }
    <div style='background-color: @source.Get("CustomColor")' class="color-box"></div>
    &nbsp; <code>App...Get("CustomColor")</code>:
    @source.Get("CustomColor") 
  </li>
  <li>
    @{ source = Settings.GetSource("SiteCustom"); }
    <div style='background-color: @source.Get("CustomColor")' class="color-box"></div>
    &nbsp; <code>Site...Get("CustomColor")</code>:
    @source.Get("CustomColor") <br>
    <em>Note: this will be empty, as Site doesn't have this setting</em>
  </li>
  <li>
    @{ source = Settings.GetSource("Global"); }
    <div style='background-color: @source.Get("CustomColor")' class="color-box"></div>
    &nbsp; <code>Global...Get("CustomColor")</code>:
    @source.Get("CustomColor") <br>
    <em>Note: this will be empty, as Site doesn't have this setting</em>
  </li>
</ul>

<style> .color-box { width: 20px; height: 20px; float: left; } </style>

 

 

Custom Dynamic DataSources - Data Relationships
#1 Settings in 2sxc
Use PageService.Activate Features like JS/CSS