Requirements
Formulas affecting Values
We'll show you examples where formulas can be applied to set the Value in many ways.
Formulas V2 has intellisense, stoppability, support for promises and more.
Important: The feature "Public Use of Edit Form" is disabled
If you want this demo to run for anonymous users you would need it. Register your site on patrons.2sxc.org to get access to the feature.Set the Value if it's empty
Try it:
This formula sets the value of a field if it's empty. As long as it's not empty, the user can type anything he/she wants.
Click on the (Σ) button above to see the edit-UI with the formula.
Formulas of FormulasIfEmpty.Title
Field.Value (Formula-Target: Field.Value)
v2((data) => { if (data.value) return data.value; return "This field should never be empty"; });
Generate a Field Combining Others
Try it:
This formula combines the values of 3 fields into a URL Slug.
Click on the (Σ) button above to see the edit-UI with the formula.
Formulas of FormulasCombineValues.UrlKey
Field.Value (Formula-Target: Field.Value)
v2((data) => { const prefix = (data.Country + '-' + data.Language).toLowerCase(); const titleSlug = data.Title.toLowerCase().replace(/ /g,'-').replace(/[^\w-]+/g,''); return prefix + "-" + titleSlug; });
Get value for a field from a WebAPI
Try it:
This formula is very advanced, and will initialize a fields value (if empty) from a WebAPI call.
🆕 in v2 all formulas returning a promise are stopped by default!
This is why the code is much simpler compared to v1.
If ever necessary, the promise returned can specify to not stop the formula, but we don't need this for the current demo.
Click on the (Σ) button above to see the edit-UI with the formula.
Formulas of FormulasWebApiText.Title
Field.Settings.Disabled (Formula-Target: Field.Settings.Disabled)
v2((data) => { // Only enable once data has been loaded return !data.Title; });
Field.Value (Formula-Target: Field.Value)
v2((data, context) => { // for demo reasons, don't do this till start is toggled. if (!data.Start) return data.value; // Call the sxc web-api controller from other tutorials return context.sxc.webApi.fetchJson('app/auto/api/basic/hello') .then(data => { console.log('got data', data); // log for demo reasons return data; // Use the result as the new value }); });
Set many Values from One Formula (new v16)
Try me:
A formula can now also set the values of other fields.
This is great when something like a dropdown-select should reset another dropdown.
Click on the (Σ) button above to see the edit-UI with the formula.
Formulas of FormulasSetMany.Master
Field.Value (Formula-Target: Field.Value)
// new formula syntax - see https://r.2sxc.org/formulas v2((data) => { if (!data.value) return; return { fields: [ { name: "Slave1", value: "Slave1 set by master which has " + data.value }, { name: "Slave2", value: "Slave2 also set by master"} ] } });
Date Examples
Date - Prefill but leave editable
Try it:
This formula sets the initial value to the current date (if the field is empty). You can try it by deleting the value, once you leave the field it's updated again.
Click on the (Σ) button above to see the edit-UI with the formula.
Formulas of FormulasDates.RightNow
Field.Value (Formula-Target: Field.Value)
v2((data) => { // don't change if already has a value if (data.value) return data.value; // if it's empty, get the current date/time return new Date(); });
Date - Calculate value
Try it:
This formula sets the third field to the current date/time + an offset the user can choose in a dropdown.
Note that since we do some calculations, we must make sure the result is time-zone cleaned.
Click on the (Σ) button above to see the edit-UI with the formula.
Formulas of FormulasDates.PublishWhen
Field.Value (Formula-Target: Field.Value)
v2((data) => { const now = new Date(); const add = data.PublishIn || 0; const offset = -now.getTimezoneOffset() / 60; return now.setHours(now.getHours() + add + offset); });
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 @using ToSic.Razor.Blade; <!-- unimportant stuff, hidden --> <div @Sys.PageParts.InfoWrapper()> @Html.Partial("../shared/DefaultInfoSection.cshtml") <div @Sys.PageParts.InfoIntro()> <h2>Formulas affecting Values</h2> <p>We'll show you examples where formulas can be applied to set the Value in many ways. </p> @Html.Partial("./Part NowUsingV2.cshtml") </div> </div> @Html.Partial("../shared/WarnAnonymousIfFeatureIsOff.cshtml") @* Fill Field If Empty *@ @* Combine Values of Fields *@ @* Get Value from WebApi *@ @* Set many values from one field *@ <h2>Date Examples</h2> @* Date Examples #1 *@ @* Date Examples #2 *@ @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })