, ,

Enable, Disable, Select Tab on Form using scripting

You can now programmatically Enable, Disable and Select a tab on the form. The generic syntax is:

 

Code

form.EnableTab(integer);

form.DisableTab(integer);

form.SelectTab(integer);

 

where interger represents the tab’s ordering spot on the form, starting with 0 for the first tab.

 

For example, to select and display the contents of the second tab on the form:

Code

form.SelectTab(1);

 

To disable the second tab on the form:

 

Code

form.DisableTab(1);

 

 

To enable the second tab on the form (in case you had previously disabled it through scripting):

 

Code

form.EnableTab(1);

 

/by
, ,

Handling the BusyChanged event for controls

Each control exposes a “BusyChanged” event which is raised when the controls starts loading data (for example for comboboxes, radiobuttons, checkboxes) and when loading completes.

The event provides a boolean parameter indicating if the loading starts or completes.

Example :

Code

form.GetControl(“c_CascadingRadio”).BusyChanged.AddHandler(function(busy) {
var c = form.GetControl(“c_LoadingIndicator”);
if (busy) c.SetValue(“Loading…”);
else c.SetValue(“Completed”);
});

/by
, ,

Handling the AttachmentsLoaded event

The “form” object available from script, exposes a specific event that is raised after the item attachments are loaded.

The event is called “AttachmentsLoaded” and provide a list of the available item attachments. For each attachment, the “Filename” and “FullPath” properties provide access to file attributes.

Example:

For the following example, we will handle the event, select all the images from the available attachments and display thumbnails inside our form.

First place a label on the form named “c_Thumbs“.

Next, inside the designer, go to the Options > Scripting > LoadCompleted script and add something like the following :

Code

form.AttachmentsLoaded.AddHandler(function(files) {
var s = “”;

// get a reference to the label control
var c = form.GetControl(“c_Thumbs”);
for (var i=0;i<files.length;i++) {
var name = files[i].FullPath;

// filter results by suffix (images only)
var suf = name.substring(name.length – 3, name.length).toLowerCase();
if (suf == “png” || suf == “gif” || suf == “jpg” || suf == “bmp”)
s = s + “<span style=’padding:10px’><a href='” + files[i].FullPath + “‘ target=’_blank’ style=”><img src='” + files[i].FullPath + “‘ width=’32’ height=’32’ style=’border:0px’ /></a></span>”
}
c.SetValue(s);
});

Here is the final result :

/by
, ,

Include custom javascript in the form

Sometimes we need to have a common function that must be called from several controls. For this purpose there is a new category in the scripts section called ‘Includes’. In this section you can write either javascripts that will be added in the form or change the default styles (CSS) with your desired style (See this article).

We have 3 controls a Number, a choice and a boolean (Yes/No) and their values affect the final result.

The first field is the Initial Amount(number), the second multiplies the initial amount and the third decides to double or not the final amount.First we create these 3 controls.

In the ‘Includes’ script section we must declare a function that calculates the final result and will be called from all 3 controls. This function’s code is

Code
<script>
function CalculateResult(form) {
   var result = 0;
   var amount = form.GetControl(“c_Amount”).GetValue();
   var multiply = form.GetControl(“c_FirstOperator”).GetValue();
   if (multiply == “” || multiply ==”Single”)
      result = 1 * parseInt(amount);
   else if (multiply == “Double”)
      result = 2 * parseInt(amount);
   else if (multiply == “Triple”)
      result = 3 * parseInt(amount);

if (form.GetControl(“c_Double”).GetValue() == “1”)
result = result * 2;

   form.GetControl(“c_Result”).SetValue(result.toString());
}
</script>

 

Last thing to do is to go to the value change section of the 3 controls and call the above function.

The form and the calculation of the results in 3 steps (one step per control change) will be :

1.Initial Amount control

2. Multiply control

3. Double checkbox control and final result

 

/by
, ,

Calling a web service programmatically

Here is an example of calling a web service client-side from a Button control within a form.

The first thing we have to do is to create the web service call in Web Services section. In our example  we will demonstrate one of the default sharepoint web services  Lists.asmx.

We give the name ‘All Lists’, we fix the credentials and we set the web service Url http://server/_vti_bin/Lists.asmx.

Then we fill in the method:

Code
<?xml version=”1.0″ encoding=”utf-8″?>
<soap:Envelope xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:xsd=”http://www.w3.org/2001/XMLSchema” xmlns:soap=”http://schemas.xmlsoap.org/soap/envelope/”>
  <soap:Body>
    <GetListCollection xmlns=”http://schemas.microsoft.com/sharepoint/soap/” />
  </soap:Body>
</soap:Envelope>

 

and set the xPath Query: /*[local-name()=’Envelope’]/*[local-name()=’Body’]/*[local-name()=’GetListCollectionResponse’]/*[local-name()=’GetListCollectionResult’]/*[local-name()=’Lists’]/*[local-name()=’List’]

Last we declare whice attributes want the service to show.

Our web service call ‘All Lists’ is ready.

Now in the desired list we place a button control and a label control. The button will execute the call and the results will be showed in the label.

We  edit the button control properties and go to the ‘Extra’ tab.

 

We place the scipt:

Code
function callback(e) {
   var c = form.GetControl(“c_WSResult”);
   var s = “<table cellspacing=’0′ cellpadding=’3′ width=’100%’>
<tr><td style=’background-color:#ccc’>List Name</td>
<td  style=’background-color:#ccc’>Action</td></tr>”;
   if (pf.IsEmpty(e.ErrorMessage)) {
      for (var i=0;i<e.ListItems.length;i++) {
         name = e.ListItems[i].Title;
         url = “<a href=\”#\” onclick=\”w = window.open(‘http://wssdev1/Lists/” + e.ListItems[i].Title + “‘,”,’
width=800,  height=600, resizable=yes, scrollbars=yes’);\” style=\”color:#cc6600\”>
Open List</a>”;s += “<tr><td>” + name + “</td><td>” + url + “</td></tr>”;
      }
      s += “</table>”;
      c.SetValue(s);
   }
   else {
      c.SetValue(e.ErrorMessage);
   }
   form.GetControl(“c_WSButton”).SetEnable(true);
}
form.GetControl(“c_WSResult”).SetValue(“Loading…”);
form.GetControl(“c_WSButton”).SetEnable(false);
form.CallWebService(“All Lists”, callback);

 

As you can see this script uses the CallWebService(WebServiceName, Callback function) method.It executes the web service call and handles the result data in callback function.In this function an html table is created with 2 columns Llist Name and Action. It is populated with all the list names and a link that opens a new windoe for each list.The whole html table is set to the label  c_WSResult.

 

Before call:

During Call:

After Call:

/by
, ,

Handling the Value-Change event of controls

There is a special section in the control properties dialog where users can write the client-side script that will be executed when the value for that control changes.

All the available methods and properties of the “form” object or the individual control methods can be found here :

Form properties and methods

Control properties and methods

The Value-Change event of each control is raised every time the value of that control changes due to :

1. A user action on the control
2. The form itself setting the value during initialization
3. A script added in the form that changes the value of a specific control.

In order to determine if the change is due to the initialization of the form, the “form.Loaded” property should be used.

For example :

Code

var value = form.GetControl(“c_Status”).GetValue();

if (form.Loaded) {

if (value == “Closed”) form.GetControl(“c_Progress”).SetValue(“100”);

}

 

/by