Skip to main content
Home  › ... 2sxc Apps › 2sxc Tutorial

Settings in 2sxc

Tutorial Home
Using multiple languages
#1 Read Global/Site/App/View Settings using the Settings object
Deep dive into the Settings stack

Settings in 2sxc 🆕 in 12.03

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 📕.

Requirements
Resources

Global/Site/App/View Settings

Settings can easily be read using the Settings object. It combines all the settings in the system to match what the code needs.

View Settings

The following settings were configured on this View - see docs
  •   @Settings.PrimaryColor: #03A9F4B3
  •   @Settings.SecondaryColor: #9C27B0E6
  • @Settings.Tiles (for example to configure images side-by-side): 4
 

<ul>
  <li>
    <div style="width: 20px; height: 20px; float: left; background-color: @Settings.PrimaryColor"></div>
    &nbsp; <code>@@Settings.PrimaryColor</code>: @Settings.PrimaryColor 
  </li>
  <li>
    <div style="width: 20px; height: 20px; float: left; background-color: @Settings.SecondaryColor"></div>
    &nbsp; <code>@@Settings.SecondaryColor</code>: @Settings.SecondaryColor
  </li>
  <li><code>@@Settings.Tiles</code> (for example to configure images side-by-side): @Settings.Tiles</li>
</ul>

App Settings

The following settings were configured on this App - see docs
  •   @Settings.QrForegroundColor: #000000
  •   @Settings.QrBackgroundColor: #FFFFFF
  • @Settings.QrDimension: 200
 

<ul>
  <li>
    <div style="width: 20px; height: 20px; float: left; background-color: @Settings.QrForegroundColor"></div>
    &nbsp; <code>@@Settings.QrForegroundColor</code>: @Settings.QrForegroundColor 
  </li>
  <li>
    <div style="width: 20px; height: 20px; float: left; background-color: @Settings.QrBackgroundColor"></div>
    &nbsp; <code>@@Settings.QrBackgroundColor</code>: @Settings.QrBackgroundColor
  </li>
  <li><code>@@Settings.QrDimension</code>: @Settings.QrDimension</li>
</ul>

Site ond Global (across Sites) Settings

The same concept applies to Site and Global settings - see docs

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

Predefined System Settings

Each installation of 2sxc has predefined settings which you can also read - see docs
  • @Settings.Images.Content.Width: 1400
  • @Settings.Images.Content.AspectRatio: 1.618
 

<ul>
  <li><code>@@Settings.Images.Content.Width</code>: @Settings.Images.Content.Width</li>
  <li><code>@@Settings.Images.Content.AspectRatio</code>: @Settings.Images.Content.AspectRatio</li>
</ul>
Using multiple languages
#1 Read Global/Site/App/View Settings using the Settings object
Deep dive into the Settings stack

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code 

@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->
<hr>

Global/Site/App/View Settings Settings... <!-- unimportant stuff, hidden -->

<hr>
<h3>View Settings</h3>
<!-- unimportant stuff, hidden -->

<ul>
  <li>
    <div style="width: 20px; height: 20px; float: left; background-color: @Settings.PrimaryColor"></div>
    &nbsp; <code>@@Settings.PrimaryColor</code>: @Settings.PrimaryColor 
  </li>
  <li>
    <div style="width: 20px; height: 20px; float: left; background-color: @Settings.SecondaryColor"></div>
    &nbsp; <code>@@Settings.SecondaryColor</code>: @Settings.SecondaryColor
  </li>
  <li><code>@@Settings.Tiles</code> (for example to configure images side-by-side): @Settings.Tiles</li>
</ul>




<hr>
<h3>App Settings</h3>
<!-- unimportant stuff, hidden -->

<ul>
  <li>
    <div style="width: 20px; height: 20px; float: left; background-color: @Settings.QrForegroundColor"></div>
    &nbsp; <code>@@Settings.QrForegroundColor</code>: @Settings.QrForegroundColor 
  </li>
  <li>
    <div style="width: 20px; height: 20px; float: left; background-color: @Settings.QrBackgroundColor"></div>
    &nbsp; <code>@@Settings.QrBackgroundColor</code>: @Settings.QrBackgroundColor
  </li>
  <li><code>@@Settings.QrDimension</code>: @Settings.QrDimension</li>
</ul>



<hr>

<h3>Site ond Global (across Sites) Settings</h3>
<!-- unimportant stuff, hidden -->

<hr>
<h3>Predefined System Settings</h3>
<!-- unimportant stuff, hidden -->

<ul>
  <li><code>@@Settings.Images.Content.Width</code>: @Settings.Images.Content.Width</li>
  <li><code>@@Settings.Images.Content.AspectRatio</code>: @Settings.Images.Content.AspectRatio</li>
</ul>



<!-- unimportant stuff, hidden -->