Basic jQuery/Javascript samples in smart forms

This article explains you below things

1. How to create a button using data label with JavaScript.
2. Trigger a Button Click event to run smart form rules from JavaScript.
3. Update a Data label value from JavaScript.

Create a simple button using data label and java script and show a sample alert on its click.

Step 1: Drag and Drop a data label on smart form.

Step 2: Now in Properties Set Literal property to true

Step 3: Navigate to Expression property click on ellipse button to add a new expression, copy below js script and click ok

 

<button onclick="javascript:alert('You Clicked a DataLabel Button!!!');">This is a Data Label Button</button>

 

That’s it, Now Run the form and you see a button created from a data label and JavaScript. Screen shot below.

Now let’s see How to Trigger a Button Click event to run smart form rules from JavaScript.

Step 1: Drag and Drop a new Button Control.

Step 2: Add click event to the button added in Step 1, and add a rule to show message “Hello from Button Control”

Step 3: Now run the form and open developer mode (hit F12) and inspect the button element, copy the id of button that you have added in Step 1

Step 4: once you have the id, you need to modify the script of data label button as below.

<button onclick="javascript:document.getElementById('00000000-0000-0000-0000-000000000000_79af447e-1e21-9933-8152-588f18d59d72').click()">This is a Data Label Button </button>

 

**00000000-0000-0000-0000-000000000000_79af447e-1e21-9933-8152-588f18d59d72 has to be replaced with id you copied from step 3

That’s it, now when you click Data Label Button, you’ll see Button Control’s rules getting executed.

 

Now Update a Data label value from JavaScript.

This is pretty much similar as above

Drag and drop a new dataLabel find its id using developer mode and replace the datalabel button script as below.

<button onclick="javascript:document.getElementById('00000000-0000-0000-0000-000000000000_f62b3928-a6e5-e16d-794a-9e9f4588bb2b').innerHTML=’Dynamically Set Text’” ()">This is a Data Label Button </button>

 

That’s it when you click data label button, you see the text of data label getting changed to “’Dynamically Set Text”.

 

This is how we can play around with jQuery/javascript in smartforms.