DNNCentric Custom Form Creator. User Manual

Transcription

1 DNNCentric Custom Form Creator User Manual

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 How to add a new field Sorting and Editing a field Manage Workflow View Saved data Manage WorkFlow Manage SQL Post Workflow Manage Final Step /Redirecting to different pages Configuration Form width and allignments Quickly changing form colors Customizing Captcha Customize Error and Validation Customize buttons File Upload Path Setting Advanced Configuration Expand/collapse of category Error Display template Secret of Default field values Edit Dynamic Content Multilanguage features Enabling ML Features Effect on categories Effect on fields Effect on dynamic content Stored SQL Queries Form Validations Upgrade Guide Uninstallation Guide Page 2 of 41

3 Introduction of the module Custom 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 s 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 definition go to the context menu and click on install module browse the desired module and install the module. Page 3 of 41

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 The DNNCentric Custom Form module will be added to the page. It will look like as- Page 4 of 41

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. Page 5 of 41

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 Page 6 of 41

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. 1 Text Box You can use Text box control where you want to give textual input. Control s Name Description Enabled Properties As you select a textbox control, certain properties enables, these are. Text Mode You can choose single line or multiline dropdown list according to your need Page 7 of 41

8 Validation Type Set as Required Field You can validate field simply by selecting options from given dropdown. E.g. you can choose id option to validate text box for id. You can set the field required to fill by checking the check box 2 Dropdown list User can use this user interface control where he/she wants to choose one value from a list. 3 List Box A GUI widget that allows user to select one item from a list. IsReadOnly By Enabling this property, User can not Modify/ Edit in the Text field. As you select a dropdown list control, certain properties enables, these are. Set as Required Field IsReadOnly Allows users to set the field as a required field according to their need User does not have permission to Upload file when enable this property As you select a list box control, certain properties enables, these are. Set as Required Field IsReadOnly Allows users to set the field as a required field according to their need User does not have permission to Upload file when enable this property Page 8 of 41

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. 5 File Upload User can use this control to uploading the file in their application 6 Check Box User can choose a check box for disable and enable any entity. 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 Set Repeat Direction Allows users to set the field as a required field according to their need Allows users to set Vertical and Horizontal direction for radio buttons File Upload control enables certain properties these are Allow File This property enables Size up too to select file size according to your need Allow File Type Set as Required Field This property gives information to user about file type can be upload in the application 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. 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 Page 9 of 41

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 Set Repeat Column Number Allows users to set Vertical and Horizontal direction for checkbox list 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 Minimum Allowed Date User can set the default date according to need Allows user to write minimum allowed date into this text box Page 10 of 41

11 Maximum Allowed Date Set as Required Field IsReadOnly Allows user to write maximum allowed date into this text box Allows users to set the field as a required field according to their need 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 Ask Seconds Set as Required Field As per your convenience select yes or no for minute. As per your convenience select yes or no for second. 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 Page 11 of 41

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 IsReadOnly Allows users to set the field as a required field according to their need 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 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. 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 Field Alignment which allows user to align the label s text according to their need. This control doesn t enable any special properties This control enables a property named Height which sets the Height of the Rich-Textbox according to their need Page 12 of 41

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 id option to validate text box for 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. Page 13 of 41

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 You can sort, delete and edit categories from here. Page 14 of 41

15 Manage Workflow This field is use to manage the flow of the Form i.e. how to manage 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. Page 15 of 41

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 After opening it with MS Excel you will get to the below shown user interface Page 16 of 41

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. Page 17 of 41

18 Manage 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 s. 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 Table.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, edit Table.css file. Page 18 of 41

19 Page 19 of 41

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 Tokens. Put the token in the text area of send to and Update. These Attachment Fields is use to Upload a file. These fields are Optional. Page 20 of 41

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. Methods include publish and request. Page 21 of 41

22 Precondition (Optional): If Condition in the Text-box is meet then Workflow Run otherwise not; it means 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 -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 s.for Custom SMTP settings, Go to the Individual Workflow Modify Advanced Settings and set required settings as shown below in the form. Page 22 of 41

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. Page 23 of 41

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. SQL script: - This field is use to Connect the string from the external Data source Page 24 of 41

25 You can use Available Tokens. Put the token in the text area of send 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. Page 25 of 41

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 QueryString1=value1 (Token Supported) Page 26 of 41

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 s asynchronously and some other properties. Page 27 of 41

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. Page 28 of 41

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. Page 29 of 41

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. Page 30 of 41

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. User screen showing localized error message Page 31 of 41

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. Page 32 of 41

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. Page 33 of 41

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. You can localized your submit button image too as shown in below form Page 34 of 41

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. Page 35 of 41

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 You can use Available Tokens. Put the token in the text area of SQL script. Page 36 of 41

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.. Page 37 of 41

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 Table.css and Resource Files Upgrading procedure is given below. Page 38 of 41

39 Do mouse over in the host link in main menu, click on module definition go to the context menu and click on install module browse the desired module and upgrade the module. Page 39 of 41

40 Uninstallation Guide For uninstalling the module do mouse over in the home link in main menu, some options will populate, click on module definition go to the particular module and click on edit button as shown in the image. In edit extension page click on Uninstall Extension link to uninstall the package. Page 40 of 41

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. Page 41 of 41