This feature provides the ability to build dynamic forms through the use of bindings. A binding is an expression made of field values as they exist on client side when the expression is evaluated, and which affects the form state on client side, thus creating forms that dynamically change based on user input. More specifically, there are expressions that can control field visibility or the value. Behind the scenes, Action Form uses the popular Angular JS library, but we've implemented a layer that would provide the more familiar syntax which is the field name between square brackets (eq [FieldId]).  More on ExpressionsThese are JavaScript flavor expressions which are evaluated by Action Form to determine if a form field is visible or to auto generate a value. So the first thing you need to know about these expressions is that they are of two kinds: Boolean expressions and Value expressions. A Boolean expression evaluates to true or false and it's used by the Show binding. A value expression returns something that is stored in a field value. These expressions are implemented on top of Angular JS data binding mechanism. Besides field value, you can invoke any JS function. For example, show a Continue button when the zip code length is 5 using this expression: [ZipCode].length == 5. Or, show it if a field is a number: !isNaN([Age]). The ability to use the JS Api is what gives limitless potential to Action Form binding expressions! Don't let yourself be fooled by the square brackets syntax. This is just a way to reference fields. But they're still JavaScript expressions, Action Form will replace the references with constructs like form.fields.<fieldId>.value before evaluating as JavaScript. So all specific rules apply. You need to use quotes (single or double) around text, concatenate using the plus operator, compare using the Boolean operators and so on. But you don't need to be a guru in JavaScript to use bindings. In 50% of the cases all that you'll use is the == operator to show or hide fields and the plus operator to concatenate strings the set the value in another field. Inside expressions you're limited to using operators only. You are not allowed to use control structures, to declare variables, functions and so on. You can however use the On Click/Change binding where you have full syntax. Using TokensWe get this often on support: "Why can't I bind using [User:FirstName]?". The answer is simple: these tokens live on the server side. We manage to fool some with this answer, but others are more alert and come with this clever question: "Ok, but what about [FormFieId] syntax? It works in binding expressions and pretty much everywhere else". Well, like mentioned earlier, we did extra work to implement this layer on top of Angular JS to translate [FormFileId] from tokens to angular specific code like form.fields.FormFieldId.value. But we've only done it for form fields. Invoking all tokens just to export them to JS would be overkill. Solution 1: Hidden FieldsBut that doesn't mean you can't do it. It's just that you have to do the work yourself. One way to do it is with Hidden Fields. Add one such field to your form and input the token in the value field. Now you have it on client side and can use it in expressions via the hidden field, pretty much like any other field. Solution 2: Initialization ScriptAnother way to do it is to export the tokens as JavaScript variables via the Initialization Scripts section in Action Form. For example, write something like: this.myUsername = "[User:Username]";. Notice the using of this keyword. It refers to the Angular JS scope. Every time you use a variable in an expression, it's fetched from this scope. So now that we've placed myUsername in the scope, we can later use it in an expression just by its name. So one field could be made visible with the following expression: myUsername == 'host'. Some very important side notes on this technique. You can also "import" global variables into Action Form. So writing something like this.myPage = g_tabId; would bring the value of a global variable to be used inside the expressions. And you can also place functions in this. For example,
And then, just invoke the function from an expression just as you'd invoke any function in JavaScript. VisibilityThis binding dynamically shows or hides fields based on a Boolean expression. Access field values by their name between square brackets and use standard JavaScript Boolean operators (==, !=, <, >, !). For example, use [PaymentMethod] == 'CreditCard' to show the credit card field only when the Payment Method is set accordingly. More complex expressions are possible by using the logical and operator (&&) and the or operator (||).  Here are a few different scenarios that use this binding.
Important! Hidden fields do not get submitted to the server. This is because the show binding is commonly used to create conditional logic, where only the visible fields make sense to be filled in and sent to server. ValueThis binding is used to auto-populate a field based on values in other fields. Let's take the most natural example in DNN: [FirstName] + ' ' + [LastName]  This is the expression that you would bind to the Display Name field. It simply concatenates the First Name with Last Name and separate them with a white space. The field will update automatically every time first name or last name fields change. But there is a catch. Once the user "touches" the Display Name field the value is no longer updated automatically. Currently there is no way to reactivate the binding once that happens. If you do need to do this, then take a look at creating the binding manually in the On Click/Change section further down on this page. You've already seen the concatenation operator in the example above. Here are more usages of this feature:
On Click/ChangeThis binding is used to bind some code to be executed when a button is clicked or a field value changes. This allows for more advanced scenarios compared to the other bindings and you can use the full JavaScript capabilities, including conditions and loops and so on. In this context, this refers to the field that raised the event, more specifically to the jQuery object built with this DOM object.  Here are some common scenarios:
|
|
|
