New Settings System in 2sxc 12.04

Settings at Global, Site, App and View level - with automatic stacking. This is revolutionary 💪.

We Need Settings on Every Layer

Settings contain anything from image sizes to GoogleMaps API keys. And we now have a LOT of power: 

1. Some settings should apply to an entire website, some only to an app, and others to the entire Dnn/Oqtane installation.
2. But: a Site or an App may also need to override a global setting. 
3. We need settings which are standardized across the 2sxc universe, so that all Apps can rely on them. We call these System Settings. 
4. We also need settings where you determine what they're called and what they contain. We call these Custom Settings. 
5. For System Settings there should also be a default which applies when you don't override them. These we call Presets.

As you can imagine, this can get very sophisticated. As you can see in the illustration above, the first four layers have System Settings (with predefined fields) and the top four layers can have Custom Settings. 

How the Settings Propagate

Let's look at an installation with two sites and four Apps:

Let's take various settings configured at different levels and explain what the final Setting would be:

1. The settings on Images.Lightbox (Width, Height, AspectRatio, etc.) would never be changed, so all these apps would use the values in the Preset System Settings
2. Site1 has redefined Images.Content (eg. Width 1000px, AspectRatio 2:1) so this affects all the views of the Gallery, Blog and Swiper in this site.
3. Site2 has not redefined ImagesContent, so the Blog there will use the Preset values.
4. The Blog App could have a Custom Setting called PageSize which is 25. On Site2 it was changed to 20, so the first Blog will use PageSize of 25, and the Blog on Site2 will use 20 items per page. 
5. The Preset contains Settings for WebResources which defines that Fancybox3 is using version 3.5.7 but for whatever reason it should be 3.5.5 on all sites. So that was reconfigured in Global. 
6. The Apps will all include Bootstrap4 if the theme doesn't include it, but Site2 is using Tailwind. So on Site2 you would change the Enabled of that WebResource to false.

Review the Resulting Settings

The Admin-UI lets you precisely analyze where a setting came from. Here's how you get there:

Once you open the dialog, you can see exactly what settings apply and where it's coming from:

You can even go deeper and click on the lens-icon to see all the places it's configured at. 

Use in Razor

in razor you can access these settings without worrying where they come from, like this:

@Settings.PageSize

@Settings.Images.Content.Width

@Resources.NextPost

@Resources.GoogleMaps.WarningApiKeyForDemoOnly

Automatic Image Resizing

In addition to just giving the Settings / Resources to Razor we're creating helpers which do much more. The new Link.Image(...) command will automatically give you a resize-url for an image with all the url-parameters from the settings, like this:

<img src="@Link.Image(Content.Image, Settings.Content)">

We'll explain this in more detail in a future blog. 

Optimized WebResources like Fancybox

When you use third-party libraries like fancybox3, FontAwesome5 or similar, the challenge is to ensure all apps use the same versions of the scripts. We call these things WebResources and they are also managed in the Settings. To make things even easier, you can use the PageService.Activate(...) command and not worry about the exact details of how it's implemented. 

For example, this is used in the latest edition of the Content templates and the Gallery App V7. Both of them use Fancybox4 which they load using this code:

var pageService = GetService<ToSic.Sxc.Web.IPageService>();
pageService.Activate("fancybox4");

The new Activate feature will use the configuration in the Settings - both to determine if it's enabled or not (because maybe you disabled it, because the skin already includes it) and the proper tags to use. 

Doing this ensures

1. That it's only included once
2. That the fancybox4 assets are loaded in the version defined in the settings - so all will use the same version
3. That it won't be loaded if the settings determine that it's not enabled

More Information

We're super exited 💖💗💓, and hope you are too. 

To learn more about this, get the latest 2sxc from the Github releases, read the docs and review the tutorials. 

With Love from Switzerland & Croatia
iJungleboy