1

UI & Layout

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

Obsolete The form background can be solid color, pattern or cover image. Use in conjunction with text color and padding below for best effects. The background images are on disk under /DesktopModules/DnnSharp/ActionForm/static/bg. Copy additional images here.

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.

Obsolete HTML text to display on the left of the form on desktop displays. On devices, it goes to top. 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).

Obsolete HTML text to display on the right of the form on desktop displays. On devices, it goes to top. Supports Tokens

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

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:

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

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

The jQuery UI theme is used for rendering controls such as dialogs or date pickers..

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.