Requirements
Create Your First Formula
We'll show you how customize your 2sxc edit forms using formulas
In this tutorial you'll learn how to:
- Create new formulas for your content fields
- Choose the correct target type
- Add the formula script
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.Brief Demo
Try it:
This formula determines the visibility of the Description field. It only becomes visible when the Title field isn't empty.
Click on the (Σ) button above to see the edit-UI with the formula.
Formulas of FormulasBasic.Description
Setting Visible (Formula-Target: Field.Settings.Visible)
// Show the field when the title isn't empty any more
v2((data) => {
return data.Title != "";
});How to Add a New Formula
For this example we'll create a formula, that makes the description field visible, once the title has been set.
First: Enter the Debug mode by pressing CTRL, Shift, Alt and clicking on a 2sxc dialog.
Navigate to the items of your content type in 2sxc.
Click on a item and press the Formulas button.
This should bring up the formulas editor. Select the attribute from the dropdown, on which the formula should be set.
Select the formula target from the next dropdown. Depending on the chosen attribute available targets can vary due to the content type.
Click on edit to make the formula function editable.
Now you can write your formula function and test it by clicking on the run button. You will see a change in the current edit form and the result after running it.
You can access other attributes using the passed data. See data and context object docs for additional information.
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>Create Your First Formula</h2>
<p>We'll show you how customize your 2sxc edit forms using formulas</p>
<p>In this tutorial you'll learn how to:</p>
<ul>
<li>
Create new formulas for your content fields
</li>
<li>
Choose the correct target type
</li>
<li>
Add the formula script
</li>
</ul>
@Html.Partial("./Part NowUsingV2.cshtml")
</div>
</div>
@Html.Partial("../shared/WarnAnonymousIfFeatureIsOff.cshtml")
<h3>How to Add a New Formula</h3>
<p>
For this example we'll create a formula, that makes the description field visible, once the title has been set.
<br>
First: Enter the Debug mode by pressing <code>CTRL</code>, <code>Shift</code>, <code>Alt</code> and <code>clicking</code> on a 2sxc dialog.
<br>
Navigate to the items of your content type in 2sxc.
Click on a item and press the Formulas button.
</p>
<p>
This should bring up the formulas editor.
Select the attribute from the dropdown, on which the formula should be set.
</p>
<p>
Select the formula target from the next dropdown.
Depending on the chosen attribute available targets can vary due to the content type.
</p>
<p>
Click on edit to make the formula function editable.
</p>
<p>
Now you can write your formula function and test it by clicking on the run button.
You will see a change in the current edit form and the result after running it.
</p>
<p>You can access other attributes using the passed data. See <a href="https://docs.2sxc.org/js-code/edit-form/formulas/data.html">data</a> and <a href="https://docs.2sxc.org/js-code/edit-form/formulas/context.html">context</a> object docs for additional information.</p>
@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })