Robin | zevenseas | SharePoint Blog

Yes yes.. another post on how to re-use the webcontrols of Nintex in your own custom workflow activity.. this time it’s the SitePicker. Which looks like this:

This picker thing took me the longest time to get working since it requires (which I’m not really sure of.. just was glad that I have it working :)) a LOT of javascript. First I added this chunk of javascript for the initialization of the picker:

var curSelObjID = "";
var curSelObjIOrigDBColor = "";
var webUrl = "";
var webID = "";
var folderID = "";
var folderUrl = "";
var siteID = "";
var isFormLib = false;
function SitePickerHandleOnClick(anchorid, type, url, webid, siteid, folderid) {
    var anchorItem = document.getElementById(anchorid);
    if (anchorItem != null) {
        if (curSelObjID != "") {
            var curAnchorItem = document.getElementById(curSelObjID);
            curAnchorItem.style.backgroundColor = curSelObjIOrigDBColor
        }
        curSelObjID = anchorid;
        curSelObjIOrigDBColor = anchorItem.style.backgroundColor;
        webUrl = url;
        webID = webid;
        siteID = siteid;
        folderID = folderid;
        //anchorItem.style.backgroundColor = "#EB501C"; // dark Nintex color
        anchorItem.style.backgroundColor = "#F39B23"; // light Nintex color
    }
}
function SitePickerNeedToExpandHandler(url, webid, siteid, folderid) {
    if (webUrl == "" && webID.length > 0) {
        webUrl = SitePickerGetWebURLFromGUID(siteID, webID);
        //webUrl = WebIDUrl(webID);
    }
    if (folderUrl == "" && folderID.length) {
        folderUrl = SitePickerGetFileURLFromGUID(siteID, webID, folderID);
    }
    if ((webUrl.substring(0, url.length) == url) || (folderUrl.substring(0, url.length) == url))
        return true;
    return false;
}
function SitePickerPostInit() {
    if (curSelObjID != "") {
        var selObj = document.getElementById(curSelObjID);
        if (selObj != null) {
            //selObj.parentElement.focus();
            //selObj.focus();
        }
    }
}
function GetSitePickerListBGColorHandler(anchorid, url, webid, siteid, folderid) {
    if (webUrl == "" && webID.length > 0) {
        webUrl = SitePickerGetWebURLFromGUID(siteID, webID);
        //webUrl = WebIDUrl(webID);
    }
    if (folderUrl == "") {
        if (siteID != "" && webID != "" && folderID != "")
            folderUrl = SitePickerGetFileURLFromGUID(siteID, webID, folderID);
    }
    if (url == folderUrl) {
        curSelObjID = anchorid;
        curSelObjIOrigDBColor = ""; // default color
        return "#F39B23";
    }
    else
        return "#000000";
}
function GetSitePickerWebBGColorHandler(anchorid, url, webid, siteid, folderid) {
    if (webUrl == "" && webID.length > 0) {
        webUrl = SitePickerGetWebURLFromGUID(siteID, webID);
        //webUrl = WebIDUrl(webID);
    }
    if (url == webUrl && folderID == folderid) {
        curSelObjID = anchorid;
        curSelObjIOrigDBColor = ""; // default color
        return "#F39B23";
    }
    else
        return "#000000";
}

Then to get the value of the sitepicker, this bit of javascript has to be inserted into the TPARetrieveConfig method:

function TPARetrieveConfig() {
    SetFilter(true, true, true, true);
    SetAllowSelectWebs(false);
    DoInternalOnLoad('SitePicker', webUrl, webUrl + "/_vti_bin/NintexWorkflow/Workflow.asmx", true);
    webID = configXml.selectSingleNode("//Parameters/Parameter[@Name='WebId']/PrimitiveValue/@Value").text;
    folderID = configXml.selectSingleNode("//Parameters/Parameter[@Name='FolderId']/PrimitiveValue/@Value").text;
    siteID = configXml.selectSingleNode("//Parameters/Parameter[@Name='SiteId']/PrimitiveValue/@Value").text;
    if (configXml.selectSingleNode("//Parameters/Parameter[@Name='Url']") && configXml.selectSingleNode("//Parameters/Parameter[@Name='Url']/PrimitiveValue/@Value").text != "") {
        translateTextAndInsertIntoRefTextField(parentUrl, configXml.selectSingleNode("//Parameters/Parameter[@Name='Url']/PrimitiveValue/@Value").text);
        document.getElementById(rdoEnterUrl).checked = true;
        document.getElementById(rdoChooseSite).checked = false;
        document.getElementById("SitePicker").style.display = "none";
        document.getElementById("enterUrl").style.display = "block";
    }
    else {
        document.getElementById(rdoEnterUrl).checked = false;
        document.getElementById(rdoChooseSite).checked = true;
        document.getElementById("SitePicker").style.display = "block";
        document.getElementById("enterUrl").style.display = "none";
 
    }
 
    SetFilter(true, true, true, true);
    SetAllowSelectWebs(false);
    DoInternalOnLoad('SitePicker', webUrl, webUrl + "/_vti_bin/NintexWorkflow/Workflow.asmx", true);
}

Then to write the values back, this bit of javascript is being used in the TPAWriteConfig method:

function TPAWriteConfig() {
    configXml.selectSingleNode("//Parameters/Parameter[@Name='WebId']/PrimitiveValue/@Value").text = self.webID;
    configXml.selectSingleNode("//Parameters/Parameter[@Name='FolderId']/PrimitiveValue/@Value").text = self.folderID;
    configXml.selectSingleNode("//Parameters/Parameter[@Name='SiteId']/PrimitiveValue/@Value").text = self.siteID;
    EnsurePrimitiveValueNode(configXml, "Url");
    if (document.getElementById(rdoEnterUrl).checked) {
        configXml.selectSingleNode("//Parameters/Parameter[@Name='Url']/PrimitiveValue/@Value").text = getStringFromRefTextField(parentUrl);
    }
    else {
        configXml.selectSingleNode("//Parameters/Parameter[@Name='Url']/PrimitiveValue/@Value").text = "";
    }
    
    return true;
}

And to make sure the SitePicker is loaded, this bit has to be referenced:

<script src="/_layouts/NintexWorkflow/SitePicker.js?Version=<%=Nintex.Workflow.Licensing.License.VersionInfo %>" type="text/javascript" language="javascript"></script>

You can see in the variables there are two ways to store the selected List (or web/site/folder) namely:

• Option 1:
• ListUrl
• Option 2:
• SiteId
• WebId
• FolderId

In the codebehind we can use the following piece of code to get to the desired selected location:

Guid SiteGuid = this.SiteId;
Guid WebGuid = this.WebId;
Guid ListGuid = this.FolderId;
                
if (this.SiteId == Guid.Empty && (!string.IsNullOrEmpty(this.Url)))
{
    Utility.GetIdsFromSharePointUrl(this.Url, out SiteGuid, out WebGuid, out ListGuid);
}

So it doesn’t matter what path is chosen, in both ways we get all the GUID’s we want to navigate to the desired location by making use of the Utility Class that is supplied with the Nintex.Workflow.dll ;)