1

UI & Layout

The template used to render the form. Custom templates can be build using XSL.

This setting is useful especially when changing the background color.

The padding adds space between the form control and the surrounding element.

Determines the position and alignment of the label relative to the input controls.

Affected fields: Text Box, Number, Email, Password, Large Text

Determines the spacing between controls.

Input CSS Classes separated by space. Supports Tokens.

If the drag&drop layout builder below is not enough, you can use an HTML template to achieve more complex scenarios.

In the HTML layout below, form fields are represented with following tokens: {{field.token}} Start building your layout from scratch or Start with a Bootstrap layout.

2

Advanced Settings

Shows or hides the CSS loading animation of Action Form.

Input HEX, RGB or RGBA color CSS code (default is #00c0ef).

Input HEX, RGB or RGBA color CSS code (default is white).

The text to be shown under the loading bars.

Choose whether this form appears initially on the page or if it should be opened when user clicks on a link. You can also open the popup by calling the dnnsf.api.actionForm.openPopupById("{{dnnsf.moduleId}}") or dnnsf.api.actionForm.openPopupByName("popupName") method from javascript. There are also other public APIs: closePopupById("{{dnnsf.moduleId}}") (to close the form modal), initForm("{{dnnsf.moduleId}}") (to manually initialize the form on the page), showFormInline("{{dnnsf.moduleId}}") (open form in text mode), hideFormInline("{{dnnsf.moduleId}}") (hide form in text mode)

Edit Template

Make sure to create a link that points to [FormUrl] (if you do the html manually, set href="[FormUrl]"). Action Form will replace this token with the actual URL that triggers the form to appear. Supports Tokens To remove, simply delete all contents (make sure to look at the HTML source as well so there's no funny things left).

The module name displayed as modal title. It can be used with dnnsf.api.actionForm.openPopupByName() method. Supports Tokens.

Enable this option if you want to embed this Action Form in other websites or other pages.
This option is only available for Enterprise or Plant an App / App Builder plans.
This option is only available when Display Mode is set to Initially Visible.
Learn more about common issues and limitations like Mixed Active Content and X-Frame-Options.
Warning! The popup functionality is not working in the embedded form (i.e.: open Action Form in popup, open fileManager in popup).

Embed Code:

Provide a boolean server expression (C#) to dynamically determine either this form is visible. The expression can contain Tokens Note that the form is ALWAYS visible for portal administrators in Edit Mode.

Include more scripts on the page along with this form. Access the form fields by using syntax [FieldId] which maps to the js object form.fields.FieldId.value, so either form will work. Supports Tokens

Disable client side validation if you want to catch validation errors on the server and execute actions.

Enable required fields to allow whitespaces as valid input. By default required fields won't consider whitespace as a valid input.

Change the validation from onkeyup to onfocusout.

Enable if you want to show Short Description content from Action Form Fields on screen, when hovering over Field's Title.

Enable if you want to show the field title in tooltip.

In debug mode Action Form will show the XML used to compile the XSL template and also log debug information.

Saving reports on form submit is disabled by default. Because of this, some features will not work properly such as using the Action Form as a data source in Grid or Load State as it relies on reports (it will work if you specifically use the Save state action).
Actions that save reports such as Save State or Save Report will work regardless of this setting.

Click to enable or disable the Save to Report option for all form fields.

You have enabled all non-password fields Save to Report checkboxes.
3

Compatibility Settings

Turn off this option if bootstrap 3 is already loaded on the page to avoid conflicts and bandwidth waste.

Turn off this option if you want to prevent FontAwesome from being loaded on the page.

Turn off this option if Angular 1.3.0 or higher is already loaded on the page to avoid conflicts.

Turn on this option to make the form submit all the fields, even if they are conditionally hidden.

Turn on this option to let the browser cache the initialization request of this Form.

Module Instance Rev. no. {{sharedData.form.RevisionNumber.Value}}, Last saved by: {{sharedData.form.RevisionLastChangedBy.Value}} on {{sharedData.form.RevisionLastChangedDate.Value}}.