Skip to main content
Home  › ... 2sxc Apps › 2sxc Tutorial
Error Showing Content - please login as admin for details.
Error Showing Content - please login as admin for details.

Formulas Tutorials

Tutorial Home
Value Formulas
#3 Formulas for DropDowns
Formulas for Field-Settings

Formulas affecting DropDowns Options

These examples show how Formulas can modify the list of available options.

Requirements
Resources

Important: The feature "Public Use of Edit Form" is disabled

The feature is needed for anonymous users to use the Edit Form. Register your site here https://patrons.2sxc.org/ to get access to the feature.

Change dropdown options: Country to Offices

    This formula changes the values in the second dropdown based on the country picked first.
    Click on the (Σ) button above to see the edit-UI with the formula.

    Formulas of FormulasDropdown.Office

    Field.Settings.DropdownValues (Formula-Target: Field.Settings.DropdownValues)

    function v1 (data, context) {
  // Start with the default list, as it could have changed
  const lines = data.default.match(/[^\r\n]+/g);
  
  // Filter and join again
  const keep = lines.filter(l => l.startsWith(data.Country));
  return keep.join('\n');
}

    Field.Settings.Disabled (Formula-Target: Field.Settings.Disabled)

    function v1 (data, context) {
  return !data.Country;
}

    Change dropdown options: Limited or More Options

      This formula changes the values in the second dropdown if the user wants more options.
      Click on the (Σ) button above to see the edit-UI with the formula.

      Formulas of FormulasDropdownDirections.Options

      Field.Settings.DropdownValues (Formula-Target: Field.Settings.DropdownValues)

      function v1 (data, context) {
  if (!data.FilterMainOptions) return data.default;
  const lines = data.default.split('\n');
  // only keep lines with 1 code like l,r,t etc.
  const onlyMain = lines.filter(v => v.indexOf(':') == 1);
  return onlyMain.join('\n');
}

      Get dropdown options from WebAPI

        This is an advanced formula which will call a WebApi to get the possible values in a drop down.
        Click on the (Σ) button above to see the edit-UI with the formula.

        Formulas of FormulasDropdownWebApi.Dropdown

        Field.Settings.DropdownValues (Formula-Target: Field.Settings.DropdownValues)

        function v1 (data, context) {
  // If it has a value, keep it, don't look for another
  if (data.value) return data.value;

  // If data had been stored in the cache by the api-call, return it
  if (context.cache.data) return context.cache.data;
  
  // Prevent the API call from running twice
  if (context.cache.alreadyRun) return data.value;
  context.cache.alreadyRun = true;

  // Call the sxc web-api controller from other tutorials
  context.sxc.webApi.fetchJson('app/auto/api/formulas/OptionsFromBackend')
    .then(data => {
      console.log('got data', data);// log for demo reasons
      // The result is a dictionary, so we convert to lines
      const lines = Object.keys(data)
        .map(k => k + ":" + data[k])
        .join('\n');
      context.cache.data = lines;  // set cache for next formula cycle
      context.form.runFormulas(); // trigger the next formula cycle
    });
}

        Source Code of /api/FormulasController.cs

        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 

        // Add namespaces for security check in Oqtane & DNN despite differences in .net core/.net Framework
// If you only target one platform, you can remove the parts you don't need
#if NETCOREAPP
using Microsoft.AspNetCore.Authorization; // .net core [AllowAnonymous] & [Authorize]
using Microsoft.AspNetCore.Mvc;           // .net core [HttpGet] / [HttpPost] etc.
#else
using System.Web.Http;                    // .net 4.5 [AllowAnonymous] / [HttpGet]
using DotNetNuke.Web.Api;                 // [DnnModuleAuthorize] & [ValidateAntiForgeryToken]
#endif
using System.Collections.Generic;          // To use the Dictionary

[AllowAnonymous]                          // all commands can be accessed without a login
public class FormulasController : Custom.Hybrid.Api14 // see https://r.2sxc.org/CustomWebApi
{
  [HttpGet]                               // [HttpGet] says we're listening to GET requests
  public object OptionsFromBackend()
  {
    var results = new Dictionary<string, string>() {
      { "first", "First option from WebApi" },
      { "second", "Second option from WebApi"},
      { "third", "3rd option" }
    };
    return results;
  }

}

// The next line is for 2sxc-internal quality checks, you can ignore this
// 2sxclint:disable:no-dnn-namespaces - 2sxclint:disable:no-web-namespace