DNN Blogs

Written for the Community, by the Community

return 42; // New 2sxc Formulas for Custom UI Logic - Towel Day 2021

Written By iJungleboy
2021-05-24

Introducing 2sxc Formula. Use simple JS functions to create calculated fields, show/hide parts of the form based on logic and way more. Happy 🌌 Towel Day 2021!

Quick Formulas Demo

As you can see the above animation shows

  1. Fields showing up once other fields are not empty
  2. The title of a group changing because fields were filled
  3. The area can collapse based on a value inside it
  4. Advanced toggles can show/hide more exotic fields
  5. Entire sections can be shown/hidden based on logic

JS Logic for Values & Settings

2sxc 12.01 let's you add JavaScript functions to any field which will control what the value or a UI Setting is. Here's an example to the right. The formula shown here is:

v1(data) {
  return data.VarPresentation;
}

Since this sets the visibility, it's basically saying the visibility should be true if the VarPresentation is true.

2sxc Formulas are like Excel Formulas

Internally every time something changes it will be stored and triggers change-detection, so all formulas are run. If a formula returns a different result than previously it will be stored again and trigger change-detection again. 

This results in an experience similar to Excel - where all fields with Formulas automatically reflect anthing that's changed.  

Things you can do with Formulas

  1. Auto-calculated initial values (like setting the current date on a field)
  2. Calculated fields (possibly even Title fields) which are a combination of other values / toggles
  3. Show/Hide fields or field-groups based on logic like values of other fields
  4. Enabled/Disable fields based on logic like values of other fields
  5. Together with ephemeral fields (also new in 12.01) you can create wizard-like UIs and a lot of other cool logic. 

More Awesomeness: Built In Formula Designer

Since you will often want to develop your formulas using live data, we've implemented that as well 💪. In any form you can enter debug-mode and start writing your formulase directly in the form. How awesome is that?

Documentation

  1. Read about formulas in the docs
  2. Read about ephemeral field which are temporary variable fields
  3. Read about the JS specifications

What the Future Holds

Thanks to formulas, we can now add more features without crowding the configuration UIs, since we can alway hide advanced settings and do other cool stuff. So you can look forward to lot's of new features. We'll also add a simpler Excel-like syntax which will look like =.

The Formulas would not have been possible without the dedicated work of Petar (@PagnoDunadan) who refactored the entire data handling stack and developed the formula engine. Many thanks!

 

Happy Towel-Day from Switzerland & Croatia,
iJungleboy & PagnoDunadan

PS: Get 2sxc 12.01 now from github releases.

 

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.



Read more posts by Daniel Mettler
Total: 0 Comment(s)

Would you like to help us?

Awesome! Simply post in the forums using the link below and we'll get you started.

Get Involved