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.

JQueryDataLabel

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.

 

Author: Vijay

I'm a K2 Certified Developer, helping teams to automate, design, develop & maintain business process applications connecting across multiple platforms with multiple technologies.

4 thoughts on “Basic jQuery/Javascript samples in smart forms”

  1. Awesome Vijay, I would add that at the form level. The control’s GUID (00000000-0000-0000-0000-000000000000_ part) changes when you include the view into a form.

    Like

  2. Hi Vijay,

    Am new to the K2 smartform and workflow, Am trying to create close button in Sharepoint document library edit form.
    If the user click the cancel button, uploaded document need to erased and the window also should be closed.

    How can i acheive that???

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s