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.
Selected: Typed (2sxc 16+) Switch to 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): 0 
@inherits Custom.Hybrid.RazorTyped
<ul>
  <li>
    <div style='background-color: @AllSettings.Get("PrimaryColor")' class="color-box"></div>
    &nbsp; Settings.PrimaryColor <br>
    @AllSettings.Get("PrimaryColor")
  </li>
  <li>
    <div style='background-color: @AllSettings.Get("SecondaryColor")' class="color-box"></div>
    &nbsp; Settings.SecondaryColor <br>
    @AllSettings.Get("SecondaryColor")
  </li>
  <li>
    Settings.Tiles <br>
    (for example to configure images side-by-side):
    @AllSettings.Int("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.RazorTyped
@*
  Important: In Typed code, we recommend .Attribute(...), .Int(...).
  It ensures it's safe for use in attributes or as a definite integer.
*@
<ul>
  <li>
    @{ var colorPri = App.Settings.Attribute("PrimaryColor"); }
    <div style="background-color: @colorPri" class="color-box"></div>
    &nbsp; App.Settings.PrimaryColor <br>
    @colorPri
  </li>
  <li>
    @{ var colorSec = App.Settings.Attribute("SecondaryColor"); }
    <div style="background-color: @colorSec" class="color-box"></div>
    &nbsp; App.Settings.SecondaryColor <br>
    @colorSec
  </li>
  <li>
    @{ var colorQrF = App.Settings.Attribute("QrForegroundColor"); }
    <div style="background-color: @colorQrF" class="color-box"></div>
    &nbsp; App.Settings.QrForegroundColor <br>
    @colorQrF
  </li>
  <li>
    @{ var colorQrB = App.Settings.Attribute("QrBackgroundColor"); }
    <div style="background-color: @colorQrB" class="color-box"></div>
    &nbsp; App.Settings.QrBackgroundColor <br>
    @colorQrB
  </li>
  <li>
    App.Settings.QrDimension <br>
    @App.Settings.Int("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 ➡️

  • AllSettings.Images.Content.Width
    1400
  • AllSettings.Images.Content.AspectRatio
    1.618 
@inherits Custom.Hybrid.RazorTyped
<ul>
  <li>
    AllSettings.Images.Content.Width <br>
    @AllSettings.Int("Images.Content.Width")
  </li>
  <li>
    AllSettings.Images.Content.AspectRatio <br>
    @AllSettings.Get("Images.Content.AspectRatio")
  </li>
</ul>

 

 

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