Formulas Tutorials

Tutorial Home › Formulas

Custom WYSIWYG with 1 additional button, multi-language

#1 Getting Started with Formulas

Requirements

2sxc 13.10

Resources

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

Important: Now using Formulas V2 🆕 in 2sxc 16
Formulas V2 has intellisense, stoppability, support for promises and more.

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.

Custom WYSIWYG with 1 additional button, multi-language

#1 Getting Started with Formulas

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 })