Download DNNCentric Custom Form Creator
Transcript
DNNCentric Custom Form Creator User Manual DNNCentric Custom Form Creator Users Guide 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 Uninstallation Guide ......................................................................................................... 40 Page 2 of 41 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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. Page 3 of 41 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 Control’s Name Text Box Page 7 of 41 Description Enabled Properties You can use Text box control As you select a textbox control, where you want to give textual certain properties enables, these are. input. Text Mode You can choose single line or multiline dropdown list according to your need DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide Validation Type Set as Required Field IsReadOnly 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. You can set the field required to fill by checking the check box By Enabling this property, User can not Modify/ Edit in the Text field. 2 Dropdown list User can use this user interface As you select a dropdown list control, control where he/she wants to certain properties enables, these are. choose one value from a list. Set as Allows users to set Required the field as a Field 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 As you select a list box control, select one item from a list. certain properties enables, these are. Set as Required Field IsReadOnly Page 8 of 41 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 4 5 Radio button list File Upload 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 Set as Required Field Set Repeat Allows users to set Direction Vertical and Horizontal direction for radio buttons User can use this control to File Upload control enables certain uploading the file in their properties these are application Allow File This property enables Size up too to select file size according to your need Allow File This property gives Type information to user about file type can be upload in the application Set as Allows users to set the Required field as a required field Field according to their need IsReadOnly 6 Check Box By enabling this Property user can not select Radio button only view 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. User can choose a check box for As you select a checkbox control, disable and enable any entity. certain properties enables, these are. Set as Required Field Page 9 of 41 Allows users to set the field as a required field according to their need DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide IsReadOnly 7 Check Box List User does not have permission to Upload file when enable this property. Check box list can be used for By choosing this control type these multiple selection properties would be enable Set As Allows users to set the field as a required field Required according to need field IsReadOnly By enabling this Property user can not select Check-Boxes only view. Set Repeat Allows users to set Direction Vertical and Horizontal direction for checkbox list Set Repeat This property enables user to set the column Column no. for checkbox list Number Maximum Selection allowed 8 Date picker Page 10 of 41 Allows user to write maximum selection allowed into this textbox. You can use this control to get Properties enables by selecting this the calendar control in your control type are application Set Default User can set the default Date date according to need Minimum Allows user to write Allowed minimum allowed date Date into this text box DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 9 Time Picker Maximum Allowed Date Set as Required Field 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 IsReadOnly User can not select Date if this property is checked. User can use the control to get By selecting Time Picker option 4 the Time Picker control in properties enables, these are his/her application Allowed User can select one of Time the options from 12hr Format and 24 hr, according to their need. Ask Hour Ask Minutes Ask Seconds Set as Required Field IsReadOnly 10 As per your convenience select yes or no for hour 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 User can not select Time if this property is checked. Country Name To get the country name list In ‘IsReadOnly property’ allow user to List (English only) your form use this control 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 11 Country Name To get the country name list In By choosing this control type these List your form use this control properties would be enable (Multilanguage) Show This property having Control as two options to choose, dropdown list or list box. This makes possible to show the country name list in your chosen control. Set as Allows users to set the Required field as a required field Field according to their need IsReadOnly 12 Label 13 Hidden Field 14 Rich Textbox Page 12 of 41 User can not select value from dropdownlist only view, if this property is enabled. 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 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 enables a property named Field Alignment which allows user to align the label’s text according to their need. 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 This control doesn’t enable any special properties DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 15 16 Watermark textbox Auto Increment Field You can use it as a textual input Set Text and when we click on it then Mode as the text will be disable . 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. It is a hidden field that allows a Prefix unique number to be generated when a new record is inserted into a table. A prefix is an affix which is placed before the stem of a start number. number from Start Number A which the increment starts. Suffix Page 13 of 41 It is an affix which is placed after the stem of a start number. DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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. Page 15 of 41 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 edit EmailTable.css file. Page 18 of 41 format Auto Generated table, DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide Page 19 of 41 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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. These Email Attachment Fields is use to Upload a file. These fields are Optional. Page 20 of 41 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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. Page 22 of 41 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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. Page 25 of 41 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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. Page 27 of 41 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 Upgrading procedure is given below. Page 38 of 41 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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. Page 39 of 41 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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. In edit extension page click on Uninstall Extension link to uninstall the package. Page 40 of 41 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd DNNCentric Custom Form Creator Users Guide 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 DNNCentric® Copyright © Skysoft IT Services Pvt Ltd