DNN Custom Forms by OnyakTech
OnyakTech Custom Forms DNN Module
by OnyakTech

OnyakTech Forms Events Manager

The Events Manager in the OnyakTech Forms module is where you define the interactive properties of your custom forms for DNN. You set the "Source" and the "Target" of the interactive event you want to occur when the user interacts with the "Source" element on your form. For example, if you want the contents of a Listbox control to change after a user enters a value into a Textbox control the Events Manager is where you define that interaction. Hiding and showing form elements, calculating values on your form and many other types of events are just a few of the types of interaction you can create with the Events Manager.

Using the Events Manager is very easy but it can also be very complex depending on how advanced you want your events to be. Lets start with something simple.

  1. Go into Edit mode on the page to display the Form Designer components like the main Toolbar and the Debug console. This will also show you the Events Manager. Click Here for a screen shot of the Events Manager.
  2. The screen shot in the previous step is taken from the "DNN User Registration with ReCaptcha" Form Pak you can download here. This event displays the HTML DIV that was added to the Form when the user checks the ONYAKTECHSUBSCRIBER checkbox. To recreate this event, set the The Event Type to "Show Target Control based on Source Control Value".
  3. Set the Source control to "ONYAKTECHSUBSCRIBER" which is a checkbox control
  4. Set the Target control by entering the CSS Selector of "#dvShowOnyakTechSub".
  5. That's it. Now click "Add/Update Event" and reload the page. Clicking the ONYAKTECHSUBSCRIBER checkbox now toggles the display of the #dvShowOnyakTechSub DIV on the Form

If you don't set the "Name of Your Event", a default name is set for you. It is not necessary to manually name all of your events.

When setting the Target Control, the "CSS Selector" has priority over the selected control. If you set a value for the CSS Selector the value you use will always be used for the Target and the control selected in the Target Controls list will be ignored. Note that you can use any valid CSS Selector, so you could setup Events that actually change other modules on the same page.

Event Action Types

  • Show Target Control based on Source Control Value: Use this event to hide/show controls or HTML elements on your form or even the same page. If your Source Control is a CheckBox you don't need to set the value to trigger the event, the event will always fire when checked. This event will force the Target control to be hidden when your form is first displayed.
  • Set Target Control Value to equal Source Control Value: Use this event to set the value of the Target Control to match the value entered into the Source Control. If your Source Control is a CheckBox you don't need to set the value to trigger the event, the event will always fire when checked.
  • Set Target List Control Items with SQL using Source Control Value: Use this event to populate the contents of a Listbox and Dropdown control based on the value in the Source Control. For this event you will use Event Target Script by entering in your SQL Statement that will be used to populate the controls values. Type a SQL statement with the token "SELECTEDVALUE" in your SQL to execute and set the Target Control value based on the result. For example: "Select StoreNames From Orders Where Name='SELECTEDVALUE'". You can also reference any of the values already entered into the Form by using the standard Token with the name of the control in the token brackets. So if you have a Textbox named ORDERID you could set your SQL statement to "Select StoreNames From Orders Where Name='[ORDERID]'"
  • Hide Target Control based on Source Control Value: Use this event to hide/show controls or HTML elements on your form or even the same page. If your Source Control is a CheckBox you don't need to set the value to trigger the event, the event will always fire when checked. This event will force the Target control to be visible when your form is first displayed.
  • Set Target Control to fixed value if Source Control has fixed value: Use this event to set the Target Control to a fixed value when a specific value is in the Source Control. In the Event Source Script enter value that if matched will set to the value listed below. In the Event Target Script enter the value to set to the target control if above value is listed in the source control.
  • Set Target Control Value with SQL using Source Control Value: Use this event to populate the contents of a standard (Textbox or Label) control based on the value in the Source Control. For this event you will use Event Target Script by entering in your SQL Statement that will be used to populate the controls values. Type a SQL statement with the token "SELECTEDVALUE" in your SQL to execute and set the Target Control value based on the result. For example: "Select OrderID From Orders Where Name='SELECTEDVALUE'". You can also reference any of the values already entered into the Form by using the standard Token with the name of the control in the token brackets. So if you have a Textbox named ORDERID you could set your SQL statement to "Select OrderID From Orders Where Name='[ORDERID]'"
  • Add Target and Source Controls, set result to CSS Selector: Use this event to add the values in the Source and Target controls. Then display the value in the CSS Selector you enter into the "Event Target Script". The CSS Selector can be a control on your form, DIV panel or any other HTML element on the page to show the total.
  • Subtract Target and Source Controls, set result to CSS Selector: Use this event to subtract the values in the Source and Target controls. Then display the value in the CSS Selector you enter into the "Event Target Script". The CSS Selector can be a control on your form, DIV panel or any other HTML element on the page to show the total.
  • Multiply Target and Source Controls, set result to CSS Selector: Use this event to multiply the values in the Source and Target controls. Then display the value in the CSS Selector you enter into the "Event Target Script". The CSS Selector can be a control on your form, DIV panel or any other HTML element on the page to show the total.
  • Divide Target and Source Controls, set result to CSS Selector: Use this event to divide the values in the Source and Target controls. Then display the value in the CSS Selector you enter into the "Event Target Script". The CSS Selector can be a control on your form, DIV panel or any other HTML element on the page to show the total.