DNNCentric Custom Form Creator. User Manual

41 

Full text

(1)

User Manual

DNNCentric

(2)

Table of contents

Introduction of the module ... 3

Prerequisites ... 3

Configure SMTP Server ... 3

Installation procedure ... 3

Creating Your First form ... 4

Adding custom form module to the page ... 4

Manage Categories ... 5

What is a category ... 5

How to add a new Category? ... 5

Sorting and Editing a category ... 6

Add/Edit Form Fields ... 6

What is a field. ... 6

How to add a new field ... 14

Sorting and Editing a field ... 14

Manage Workflow... 15

View Saved data ... 15

Manage Email WorkFlow ... 18

Manage SQL Post Workflow ... 23

Manage Final Step /Redirecting to different pages ... 26

Configuration ... 27

Form width and allignments ... 27

Quickly changing form colors ... 28

Customizing Captcha ... 29

Customize Error and Validation ... 29

Customize buttons ... 30

File Upload Path Setting ... 30

Advanced Configuration ... 30

Expand/collapse of category ... 30

Error Display template ... 31

Secret of Default field values ... 31

Edit Dynamic Content ... 31

Multilanguage features ... 32

Enabling ML Features ... 32

Effect on categories ... 33

Effect on fields ... 33

Effect on dynamic content... 34

Stored SQL Queries ... 35

Form Validations ... 37

Upgrade Guide ... 38

(3)

Introduction of the module

Custom Email form is a DNN Module to create custom or dynamic forms. You can create different type of form fields and group them into categories, sort them, Hide/ unhide them the way you want. You can optionally configure the form to be redirected to a different page after a successful submission

Prerequisites

Configure SMTP Server

Prior to creating any form this is necessary to save some required settings to get the appropriate results, like for sending emails and saving that data to view saved data (explained below). For SMTP Server settings, Go to the Host  Host Setting SMTP Server Settings and set required settings as shown below in the form.

Installation procedure

For installing your desired module do mouse over in the host link in main menu, click on module definitiongo to the context menu and click on install module browse the desired module and install the module.

(4)

Creating Your First form

Adding custom form module to the page

In order to add “DNNCentric custom form” module to a desired page follows these steps: • Select the “Add New Module” radio button.

• Choose “DNNCentric custom form” from the “Module” pull down menu. • Click on the “Add” link

(5)

When you click on the control panel it will look like as-

Manage Categories

What is a category

You can group one or more form fields in different categories. For e.g. you can create categories like “Personal Information”, “Professional Details”.

How to add a new Category?

To access Add / Edit category user interface page go through the manage category link into the action menu bar, you will access the below page.

Click to the add new category link to add categories in your form.After clicking on that link u will get to the below form.

(6)

Add all required categories one by one in your form.

Sorting and Editing a category

You can sort, delete and edit categories from here.

Go back to the main page and click on the “Add/Edit Form Fields’’ link from the context menu. You will get to the below form

Add/Edit Form Fields

What is a field.

Click on Add New Control to get the next page where you will be able to add new controls in your custom form. This form contains the all fields that may be used to build the form. These are

Control Type Field Name Category Active

(7)

Properties (according to the control type) Text Properties

Caption Default Value

All these fields are explained below.

Control Type: Control Type enables user to choose required control type with given list of controls, accordingly properties of that control enables and asks user to set properties according to their need.

Field Name: This feature becomes use for uniquely identify fields for internal use of form fields. That cannot be changed once saved.

Category: Choose category accordingly in which controls to be added. Active: Check this box to make the field control active.

Properties: Properties of controls change according to control type has been chosen in the form. This is a very useful feature which helps user to set fields value according to their need and according to their control type.

Text Properties: Text property is a section in which two fields are there, both of them detailed below.

Caption: This is a text field in which user inserts field name what he/she wants to identify for particular field.

Default Value: Here we can define default value for any particular field.

Here I am explaining all the control types and properties which populates automatically while selecting control type.

Sr. No.

Control’s Name Description Enabled Properties 1 Text Box You can use Text box control

where you want to give textual input.

As you select a textbox control, certain properties enables, these are. Text Mode You can choose single line or multiline

dropdown list

(8)

Validation Type

You can validate field simply by selecting options from given dropdown. E.g. you can choose Email id option to validate text box for Email id.

Set as Required Field

You can set the field required to fill by checking the check box

IsReadOnly By Enabling this property, User can not Modify/ Edit in the Text field.

2 Dropdown list User can use this user interface control where he/she wants to choose one value from a list.

As you select a dropdown list control, certain properties enables, these are. Set as

Required Field

Allows users to set the field as a required field according to their need

IsReadOnly User does not have permission to Upload file when

enable this

property 3 List Box A GUI widget that allows user to

select one item from a list.

As you select a list box control, certain properties enables, these are. Set as Required

Field

Allows users to set the field as a required field according to their need

IsReadOnly User does not have permission to Upload file when enable this property

(9)

4 Radio button list In a GUI user can use, one of a group of small circles that represent a set of choices (indicated by text next to the circles) from which only one can be selected; the selected choice is indicated by a partly filled circle.

By selecting radio button list control two properties enables these are IsReadOnly By enabling this

Property user can not select Radio button only view

Set as Required Field

Allows users to set the field as a required field according to their need Set Repeat

Direction

Allows users to set Vertical and Horizontal direction for radio buttons

5 File Upload User can use this control to uploading the file in their application

File Upload control enables certain properties these are

Allow File Size up too

This property enables to select file size according to your need Allow File

Type

This property gives information to user about file type can be

upload in the

application Set as

Required Field

Allows users to set the field as a required field according to their need IsReadOnly User does not have

permission to Upload file when enable this property.

6 Check Box User can choose a check box for disable and enable any entity.

As you select a checkbox control, certain properties enables, these are. Set as

Required Field

Allows users to set the field as a required field according to their need

(10)

IsReadOnly User does not have permission to Upload file when

enable this

property.

7 Check Box List Check box list can be used for multiple selection

By choosing this control type these properties would be enable

Set As Required field

Allows users to set the field as a required field according to need IsReadOnly By enabling this

Property user can not select Check-Boxes only view.

Set Repeat Direction

Allows users to set Vertical and Horizontal direction for checkbox list

Set Repeat Column Number

This property enables user to set the column no. for checkbox list

Maximum Selection allowed

Allows user to write maximum selection allowed into this textbox.

8 Date picker You can use this control to get the calendar control in your application

Properties enables by selecting this control type are

Set Default Date

User can set the default date according to need Minimum

Allowed Date

Allows user to write minimum allowed date into this text box

(11)

Maximum Allowed Date

Allows user to write maximum allowed date into this text box

Set as Required Field

Allows users to set the field as a required field according to their need

IsReadOnly

User can not select Date if this property is checked.

9 Time Picker User can use the control to get the Time Picker control in his/her application

By selecting Time Picker option 4 properties enables, these are

Allowed Time Format

User can select one of the options from 12hr and 24 hr, according to their need.

Ask Hour As per your convenience select yes or no for hour

Ask Minutes

As per your

convenience select yes or no for minute. Ask

Seconds

As per your

convenience select yes or no for second. Set as

Required Field

Allows users to set the field as a required field according to their need

IsReadOnly

User can not select Time if this property is checked.

10 Country Name List (English only)

To get the country name list In your form use this control

‘IsReadOnly property’ allow user to set field as Read Only that can not be modify/edit by user.

User can not select value from dropdownlist only view

(12)

11 Country Name List

(Multilanguage)

To get the country name list In your form use this control

By choosing this control type these properties would be enable

Show Control as

This property having two options to choose, dropdown list or list box. This makes possible to show the country name list in your chosen control. Set as

Required Field

Allows users to set the field as a required field according to their need

IsReadOnly

User can not select

value from

dropdownlist only view, if this property is enabled.

12 Label A label is a user interface control which displays text on a form. It is usually a static control; having no interactivity. A label is generally used to identify a nearby text box or other Widget. User can use this control wherever he/she want to use as a static control

This control enables a property named Field Alignment which allows user to align the label’s text according to their need.

13 Hidden Field User can use this control to create hidden html fields. These values may be used to hide session values, query string values etc.

This control doesn’t enable any special properties

14 Rich Textbox It is rich in advance features in comparison of basic text "Rich text" also includes information about the document formatting, such as font, size, bold, italics, margins and so-on.

This control enables a property named Height which sets the Height of the Rich-Textbox according to their need

(13)

15 Watermark textbox

You can use it as a textual input and when we click on it then the text will be disable .

Set Text Mode as

You can choose single line or multiline dropdown list according to your need

Validation Type

You can validate field simply by selecting options from given dropdown. E.g. you can choose Email id option to validate text box for Email id. Set as

Required Field

You can set the field required to fill by checking the check box

IsReadOnly By Enabling this property, User can not Modify/ Edit in the Text field.

16 Auto Increment Field

It is a hidden field that allows a unique number to be generated when a new record is inserted into a table.

Prefix A prefix is an affix which is placed before the stem of a start number.

Start Number A number from which the increment starts.

Suffix It is an affix which is placed after the stem of a start number.

(14)

How to add a new field

Choose particular control type from drop down box, give desired field name, choose categories and fill properties value which populates according to control has been chosen.

Sorting and Editing a field

(15)

Manage Workflow

This field is use to manage the flow of the Form i.e. how to manage email setting, manage PostData etc. See the below.

View Saved data

After submitting data you can view the saved data in manage work flow form. To get the saved data go through the View Saved Data link. Prior to this you’ll have to set the SMTP server settings and add the work flow from add/manage work flow form.

This form shows the submitted data in a grid and by the help of ‘Export Data’ button you can export data in XML and can open downloaded data in excel sheet form.

(16)

Follow these steps to download data and exports in excel 2003 and in excel 2007

Click on Export data button to get the below shown image

Save that file and open it with Microsoft office excel like in below shown image

(17)

Choose As an XML table option and click on Ok button. You will get to the below shown user interface.

Here after clicking on the OK button you will get the saved data in grids, as shown below.

(18)

Manage Email WorkFlow

In order to send a mail it is necessary to add work flow for current language.

In order to add new work flow go to the Add/Manage work flow link from the context menu, in new page click on Add New Workflow link to get the below form.

Two tokens have been used for configuring emails. These are 1. $(AutoFieldValuelist)

Use this token to get a readymade table of all the fields and corresponding values.

Tip: To format Auto Generated table,

edit EmailTable.css file. 2. $(FilledInFieldValueList)

Use this token to get a readymade table of only those fields and their values that are

filled in before the form is submitted.

Tip: To format Auto Generated table,

(19)
(20)

In this form you have options to customize the from address field and to address field, as well as you can create new template, as required. You can use Available Email Tokens. Put the token in the text area of send email to and Update.

(21)

In this form you have option to enable the appointment by click on the checkbox. You can use Available Tokens. . Put the token in the text area of Date Start, Start Time, Date End, End Time, Summary, Location, Description .Alarm trigger is used to declare the time of alarm.

(22)

Precondition (Optional): If Condition in the Text-box is meet then Workflow Run otherwise not; it means Email will send when condition is true otherwise not.

These conditions are also Token Supported. You can use Available tokens. e.g. ‘$(Name)’ =’Sam’

$(Name) is the Available token.

Default value is True means if you do not write anything in the Precondition text-box then Email-workflow run.

Custom SMTP: Custom SMTP is configuring for each workflow individually.

Prior to creating any form this is necessary to save some required settings to get the appropriate results, like for sending emails .For Custom SMTP settings, Go to the Individual Workflow  Modify Advanced Settings and set required settings as shown below in the form.

(23)

Manage SQL Post Workflow

In order to send a Form Data in a Database it is necessary to add Manage Post Data for current language. In order to add new Manage Post Data go to the Manage work flow link from the context menu, in new page click on Manage Post Data link to get the below form.

(24)

In this form you have five options.

Template For The Language (Culture) :- This option is use to select culture for workflow

Workflow Name: - This option is use to type Postdate Workflow name.

Connection string: - In this field, use the Workflow Connection String which connect the values of form to the Data base.

Script Type: - Select query Type from dropdown list either Stored Procedure or SQL script.

(25)

You can use Available Email Tokens. Put the token in the text area of send email to and Update.

Precondition (Optional): If Condition in the Text-box is meeting then sql query is executed otherwise not.

These conditions are also Token Supported. You can use Available tokens. e.g. ‘$(Name)’ =’Sam’

$(Name) is the Available token.

Default value is True means if you do not write anything in the Precondition text-box then Manage SQL Post workflow run.

(26)

Manage Final Step /Redirecting to different pages

By simple click on the particular “Manage Final step” link .Here you can write any Response message or can redirect user to given URL. This form is used for selecting screen action on process completion; here we have a drop down box which enables to select options “Show Message to User” and “Redirect User to Given URL”. Get to the below form select “Show Message to User” option from drop down.

By selecting “Redirect User to Given URL” below shown options enabled. Give the address of URL at given place, and after submitting the form, you will be redirect to that page.

You can also Query String Parameter. Enter each query string in New Line. For Example QueryString1=value1

(27)

Configuration

In this page you can change your form layout as per your convenience. There are so many settings exist in this page. You can customize general settings in general Form layout option; also you can customize Form UI, captcha settings, and error format. One important feature is Customize Submit button, if you want to upload a new file or image you can simply click on the image Button and a dropdown comes up. In dropdown select Upload New and a new file upload control comes up through this you can simply upload your desire file.

Form width and allignments

To customize form’s width and alignment property go to the Configuration option from the context menu and expand the General Settings option, here you can customize caption

Position, form alignment, form width, Send emails asynchronously and some other properties.

(28)

Quickly changing form colors

To customize Form UI you should to go to the Form Layout option from the context menu and expand the ‘customize Form UI’ option. This option gives facility to change the form elements color according to user needs, like you can change header text color, form background color, caption text color and header background color. As well as you can customize font size/text size and alignment properties from here.You can also customize the watermark caption color and font.

(29)

Customizing Captcha

One of the important security features which user can add in his/her forms is captcha control. To get the captcha control, go to the Configuration option from context menu and expand customize captcha option. Here you can enable and disable captcha control through Show Captcha Control option. It allows choosing one option from dropdown box. Another option enables user to enable Standard or Recaptcha control.

Customize Error and Validation

In this feature you can Customize Error and Validation format in a very easy way. To get the Customize Error and Validation control, go to the Configuration option from context menu and expand customize captcha option. This setting use for required field validate .To enable this setting, Click on Show Required field Indicator check-Box.

(30)

Customize buttons

Customize submit button gives facility to set the button’s alignment, button type and One important feature in Customize Submit button option is if you want to upload a new file or image you can simply click on the image Button and a dropdown comes up. In dropdown select Upload New and a new file upload control comes up through this you can simply upload your desire file.

File Upload Path Setting

File upload path setting gives facility to fix a file path for uploading.

Advanced Configuration

Expand/collapse of category

This special property enables user to make expanded or collapsible categories in the forms. To enable this feature go to the Form Layout option from the context menu and expand the General Form layout option. Choose yes or no in the Category Section Collapsible option according to your need.

(31)

Error Display template

In this module you can customize error format in a very easy way. To customize error display message use the error message template, where you can add your own characters with already given tokens, also you can customize error message panel position with given Error Message Panel Position property.

Secret of Default field values

Here we can define default value for any particular field. This field allows general text and

DNN Tokens- e.g. [User:FirstName] [User:LastName] Session variable- e.g.session:variableName

Viewstate variable- e.g.viewstate:variableName querystring- e.g. querystring:VariableName

Edit Dynamic Content

To edit default dynamic content go to the, Edit Dynamic Content from context menu, here you will find a dropdown box which enables to select the option in which you want to edit the content, and these options are Submit Image Button, Error Messages(s), Submit Button text, Clear Button Text, and Captcha Text.

You can edit the default error message(s) as shown below image.

(32)

Multilanguage features

Enabling ML Features

In order to enable Multilanguage feature to your application go to the ‘Configuration’ link from context menu and check the ‘Enable Multilanguage Feature’ check box, as shown in the form.

(33)

Effect on categories

After enabling the Multilanguage feature you’ll be able to add same categories in other language too. As shown below in the form.

Effect on fields

As well as you can add controls in different language within relevant categories in your form. As shown below in the form.

(34)

Effect on dynamic content

After enabling Multilanguage feature in your module, you will be able to do miscellaneous localization in default content, for example you can localize your error message as per your Language dependent. For example if you want to give an error message in US, Hindi and en(AU) also, you can simply select message from the dropdown and type its language dependent error message in the Textbox just like that

Similarly you can localized the other content too like submit button Text as shown in below image.

(35)

Stored SQL Queries

In order to execute the sql query from a Database it is necessary to add Stored SQL

queries for current language. In order to add new Stored SQL queries go to the stored SQL Queries link into the control panel, you will access the below page.

Click to the add new Stored SQL Script link to add SQL script .After clicking on that link you will get to the below form.

(36)

In this form you have four options.

Stored SQL Query Name: - This option is use to type Sql query name.

Connection string: - In this field, use the Workflow Connection String which connect the values of form to the Data base.

Script Type: - Select query Type from dropdown list either Stored Procedure or SQL script.

SQL script: - This field is use to Connect the string From the external Data source

(37)

Form Validations

.

Validation is the process of making custom messages. It ensures that the user has provided error messages for fields. If the entered validation condition is true then form will display error message.

(38)

In this form you have four options.

Form Validation Name: - This option is used to type Form validation name.

Form Validation Condition: - In this field, use the Validation condition which connect the values of form to the error message.

Error: - This option is used to describe the error message to be displayed.

Highlighted Field Name: - This field is used to mention the fields which get highlighted when the condition meet.

The form will show error message as follows-

Upgrade Guide

For upgrading your desired module follow same procedure as installation of module only before upgrading to one version of module to another version Backup important file like CSS Files named module.css and EmailTable.css and Resource Files

(39)

Do mouse over in the host link in main menu, click on module definitiongo to the context menu and click on install module browse the desired module and upgrade the module.

(40)

Uninstallation Guide

For uninstalling the module do mouse over in the home link in main menu, some options will populate, click on module definitiongo to the particular module and click on edit button as shown in the image.

(41)

Note: Once module will be uninstalled all its files, database tables, procedures etc will be cleared and any data relating to the module is lost. This change is not non reversible.

Figure

Updating...

References

Updating...

Related subjects :