Wouldn’t you prefer to hide or show fields on your Dynamic Form instances without using Question Events? Postbacks can become time consuming if you have a large form. This example is just me sharing a technique that I use within Dynamic Forms to avoid Question Event Postbacks.

This example uses JavaScript to achieve the conditional hide or show Dynamic Form field.

Here’s my form:

Preparing the JavaScript

I want to hide the two Multi-lined text boxes until a selection is made from the Radio buttons. So I want to initially hide the two Multi-lined text boxes on page load. To do so I can use JavaScript under the Module Configuration –> Advanced Coding Options (AJAX, jQuery, JavaScript, Initial SQL DataBind) –> Custom JavaScript File –> Initial JavaScript. However what do I put there????

We will need to find the Dynamic Forms rowID’s for the Label and Question that we wish to hide. You can look into the Source code to obtain, or like myself, use the FireFox plugin(FireBug).

In this example, my RowID’s are:

• dnn_ctr2537_DynamicForms_Row_95e63704-01d5-4b49-8fd5-169404b9dcb0
• dnn_ctr2537_DynamicForms_Row_5b493000-04e2-4ed5-b141-1f6631af5857

So I need to prepare some JavaScript to place into the Initial JavaScript section that I mentioned above:

try{ document.getElementById('dnn_ctr2537_DynamicForms_Row_95e63704-01d5-4b49-8fd5-169404b9dcb0').style.display= 'none'; } catch(err){}

try{ document.getElementById('dnn_ctr2537_DynamicForms_Row_5b493000-04e2-4ed5-b141-1f6631af5857').style.display= 'none'; } catch(err){}

Now upon page load my two Multi-lined text boxes will be hidden.

I must prepare the JavaScript to conditionally show / hide the correct Multi-lined text box based on the Radio Button selection.

Preparing the Hide/Show JavaScript

The JavaScript below contains the logic to hide/show the appropriate Multi-lined text box. 

if(funcRadioCalc($(DForDR_FieldID)) == 'DynamicForms'){document.getElementById('dnn_ctr2537_DynamicForms_Row_95e63704-01d5-4b49-8fd5-169404b9dcb0').style.display= '';document.getElementById('dnn_ctr2537_DynamicForms_Row_5b493000-04e2-4ed5-b141-1f6631af5857').style.display= 'none';}else if(funcRadioCalc($(DForDR_FieldID)) == 'DynamicRegistration'){document.getElementById('dnn_ctr2537_DynamicForms_Row_95e63704-01d5-4b49-8fd5-169404b9dcb0').style.display= 'none';document.getElementById('dnn_ctr2537_DynamicForms_Row_5b493000-04e2-4ed5-b141-1f6631af5857').style.display= '';}else{document.getElementById('dnn_ctr2537_DynamicForms_Row_95e63704-01d5-4b49-8fd5-169404b9dcb0').style.display= 'none';document.getElementById('dnn_ctr2537_DynamicForms_Row_5b493000-04e2-4ed5-b141-1f6631af5857').style.display= 'none';}

Below is an image of the configuration settings for the Radio Button control:

Now you have achieved hiding/showing specific Dynamic Form questions  conditionally without a postback occurring.

Have you ever wanted to use the Tabs feature within a Dynamic Forms 4.0 + instance? If so, many people want the submit button to be available only on the last tab. However the default Dynamic Forms submit button is available to all tabs.

This example will provide a solution to this:

This is my form, there are 3 tabs.

1.) Personal Info

2.) Address Info

3.) Contact Info

For the last tab “Contact Info”, make sure that you include a Text/HTML question with HTML to render a button.

To make this Custom Text/HTML button submit the Dynamic Form, you will need to copy the jQuery call that’s embedded inside of the “Original Submit Link” onClick event. I use the FireFox plugin (FireBug) to inspect controls, CSS, JavaScript, etc.. on a page.

In the case of my form, my jQuery call to submit the Dynamic Form is:

__doPostBack('dnn$ctr2536$DynamicForms$lnkSave','')

You will need to paste this code into the OnClick event of your Text/HTML custom Submit button like so:

Now all that you’ll need to do is go to Module Configuration –>  Links (Submit, Save for Later, Clear) –> and Initially hide the submit link:

Now you have finished creating your custom HTML button.

Hi everyone! Last week I spoke as a panelist for DotNetNuke store and vendors webinar which DNN Corp put together… Within the webinar I presented some new features and enhancements that DotNetNuke recently added to the DNN Store related to Google Analytics and ECommerce Tracking. Analytics with Ecommerce allows vendors to properly setup and measure their marketing dollars to find out where sales and transactions came from, and which marketing dollars led to those efforts. You can find out more about Ecommerce tracking here: https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingEcommerce

I approached the DNN Store a few months ago regarding how the store could begin to take advantage (and vendors could then take advantage) of new Google Analytics w/ Ecommerce tracking features. DotNetNuke worked to create a pilot program for us to assist with the implementation/testing so that they can offer the enhancements to all vendors. BIG THANKS to DNN Corp for adding these enhancements!

Previously, Snowcovered did allow for Google Analytics integration, however this had to be a separate integration code that was specific to the www.snowcovered.com domain. When it comes to properly setting up analytics (and then enabling the ecommerce feature), there are several steps involved to make sure that the domain name can be properly tracked without losing the analytics information throughout the process. 

So… How can you take advantage of these new enhancements?

Step 1:  Make sure you have an Analytics account and you have already enabled/implemented your Analytics Code on your website. https://www.google.com/analytics

Step 2: Enable Ecommerce within your Google Analytics account. You can do this be signing into your account and navigating into “Admin”, then “Property Settings”, and finally choosing to enable the Ecommerce Option.

Step 3: Enable Ecommerce and your tracking code within the DNN Store.There are two new fields in the vendor profile area. The GA SetDomianName is set to “none” by default for all vendors, this is the setting needed for the cross site tracking. The Enable GA Ecommerce is disabled by default, if a vendor would like to track the ecommerce data they will need to check this.

Step 4: Modify your JavaScript for using Google Analytics to include a few additional settings for setting the domain name, allowing the “Link Tracking”, and tracking the page view.  Specifically you need to enable the options for setDomainName, setAllowLinker, and trackPageView

Step 5:  Accurately utilize tracking… you will need to setup all hyperlinks that are pointing to the store to use the Google Analytics Link Tracking Onclick event. You can find more information here:

Here is an example.. Notice how the HREF still stays the same as it used to, however now there is also an “onclick” javascript reference within the hyperlink tag.

Tuesday, May 29, 2012/Author: Chad Nash/Number of views (183686)/Comments (-)/ Article rating: No rating