In the first article of the blog I wrote about displaying field values in (Render Pattern) Display Pattern using web-services and JavaScript. This method is good enough… However, if we have large volume of data to display the productivity will be low. The reason is that every time field value isn’t filled a web-service is called and a wsdl answer is parsed. Probably this method of displaying values by this type of field can satisfy an end-user it’s unlikely that metadata field will be widely used). However, it won’t work with Extended Lookup Field.
The first idea for automation is a onetime call of a web-service to transfer an array of nonrecurring field values. And it’s better to choose another data format instead of XML. Using jQuery is one of the best ways to select necessary items on a HTML page. Choosing this framework it’s better to send and receive data in JSON format. Moreover there are all necessary metadata for it in NET Framework 3.5 SP1.
As far as web-service call will be made only once it’s better to make this via element event in HeaderPattern. Such element will be iframe element with onload event. A part of the HeaderPattern code for this decision is given below.
<RenderPattern Name="HeaderPattern"> <HTML><![CDATA[<script src="/_layouts/jQuery/jquery-1.6.4.js"></script>]]></HTML> <HTML><![CDATA[<script src="/_layouts/jQuery/json2.js"></script>]]></HTML> <HTML><![CDATA[<script src="/_layouts/ExtLookup.js"></script>]]></HTML> <HTML><![CDATA[<iframe id="Header]]></HTML> <List/> <Property Select="Name"/> <HTML><![CDATA[" height="0" width="0" onl oad="GetExtValueAJAX("div_]]></HTML> <List/> <Property Select="Name"/> <HTML><![CDATA[", "]]></HTML> <HttpVDir/> <HTML> <![CDATA[", "]]> </HTML> <List/> <HTML> <![CDATA[", "]]> </HTML> <Property Select="Name"/> <HTML> <![CDATA[");"></iframe>]]> </HTML> </RenderPattern>
Here you can get to know and take the Json2.js file, JavaScript realization of JSON parser. The ExtLookup.js is a script which contains realization of GetExtValueAJAX method. Its code is given below:
function GetExtValueAJAX(divname, siteurl, listid, fieldname) { $(document).ready(function () { // arrays initialization for selection of nonrecurring values var mass = []; var vass = []; // metasymbol replacement in selector divname = divname.replace("{", "\\{").replace("}", "\\}"); // selection of div elements referring to field var divs = $('div[id^=' + divname + ']').toArray(); $.each(divs, function() { if (this.extvalue != "") { // filling mass array with nonrecurring field values (values of extvalue attribute) if ($.inArray(this.extvalue, vass) == -1) { vass.push(this.extvalue); mass.push({ "Value": this.extvalue, "Display": "" }); } } }); // call web-service for getting $.ajax({ type: "POST", url: siteurl + "/_vti_bin/WSJSONExtLookup.asmx/GetExtLookupValue", // data transfer in string of objects in JSON format dat a: "{ value:'" + JSON.stringify(mass) + "', listID: '" + listid + "', fieldName: '" + fieldname + "'}", contentType: "application/json; charset=utf-8", success: function ExtValueSuccess(response) { // get result var extVals = eval('(' + response.d + ')'); $.each(divs, function() { if (this.extvalue != "") { // replacement of div element content with HTML code which is relevant to the field value $(this).html(RenderExtLookupJSON(this.extvalue, extVals)); } }); }, dataType: "json", failure: ExtValueCallFailed }); }); return 0; } function ExtValueCallFailed() { //error display } function RenderExtLookupJSON(val, extVals) { var res = ""; $.each(extVals, function () { if (this.Value == val) { res += this.Display + "<br/>"; } }); return res; }
Firstly nonrecurring values of extvalue attributes of div elements referring to the field are selected. Then they are transferred to a web-service as a parameter. The web-service processes them and gives values to display in JSON format. Then content of div elements is replaced via relevant values of extvalue attribute.
It’s impossible to clarify the understanding of the script work without a description of DisplayPattern. Here ID values of div elements of field display are specified; here extvalue attribute with relevant field value is registered.
<RenderPattern Name="DisplayPattern"> <HTML> <![CDATA[<div id="div_]]> </HTML> <List/> <Property Select="Name"/> <Field Name="ID"/> <HTML> <![CDATA[" extvalue="]]> </HTML> <Column/> <HTML> <![CDATA["></div>]]> </HTML> </RenderPattern>
Server part – web-service code is given below. Here I give code fragments on key insights: DataContractJsonSerializer class for working with JSON format and description of a class which encapsulates JSON data. The realization of displaying values in HTML format depends on developer’s imagination.
[System.Runtime.Serialization.DataContract] public class ExtLookupValueJSON { public ExtLookupValueJSON() { } public ExtLookupValueJSON(string value, string display) { this.Value = value; this.Display = display; } [System.Runtime.Serialization.DataMember(Name = "Value")] public string Value { get; set; } [System.Runtime.Serialization.DataMember(Name = "Display")] public string Display { get; set; } } [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.Web.Script.Services.ScriptService] public class WSJSONExtLookup : WebService { public WSJSONExtLookup() { } [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public string GetExtLookupValue(string value, string listID, string fieldName) { List<ExtLookupValueJSON> list=new List<ExtLookupValueJSON>(); DataContractJsonSerializer serializer = new DataContractJsonSerializer(list.GetType()); using (MemoryStream ms = new MemoryStream(Encoding.Default.GetBytes(value))) { list = (List<ExtLookupValueJSON>)serializer.ReadObject(ms); ms.Close(); } [...] string jsonString = ""; using (MemoryStream ms = new MemoryStream()) { serializer.WriteObject(ms, res); jsonString = Encoding.UTF8.GetString(ms.ToArray()); ms.Close(); } return jsonString; } }
The only problem of this decision is an open visualization of value display. As far as we know, jQuery activates when a page is completely loaded. After its load an end-user can see sequential displaying of elements referring to fields of this type. However it takes a few seconds and it’s more pleasant to look at sequential page load than to wait for its complete display with hangup effect.
Russian version - SharePoint: Расширенная подстановка - Вывод значений в ListViewWebPart с использованием jQuery + JSON.
Russian version - SharePoint: Расширенная подстановка - Вывод значений в ListViewWebPart с использованием jQuery + JSON.
No comments:
Post a Comment