Background

We needed a way to present information about one of our applications in a way that was easily accessible and fast. I initially thought about using Wiki pages, but felt that something a little less static would be more fun.

I’ve used SharePoint to create content before, see ‘JQuery and SPServices’ and while the content was blogs, you can do the same thing using a common SharePoint list for your data source.

The Point

The List

I created a list with the following columns:

Column	Definition
Title	Servers as the Application category of content. In this case, it is the name of the application. Seeing the potential of the tool, I decided to put in this category so that we could expand it for multiple applications.
AppName	Serves as a functional view being represented by the narrative.
AppPic	Picture/Diagram associated with the functionality of the application.
AppDesc	The narrative describing the functionality of the application.
Category	Serves as the category grouping for the application, for instance Overview, Troubleshooting, Technical Details, etc.,
Source	Optional value that links to the document that is the source for your narrative (if applicable).
AppPic2	Sometimes more than one picture is necessary to tell the story.
Floater1/Floater2	When viewing the final page, these floaters appear over the corresponding pictures (AppPic, AppPic2).

The Content

Here is an example of the content of the list for one entry. So the inevitable question is “Well…couldn’t you just send the user to this list?”. Seriously??!!, where is the fun in that!? Do you really want to point your users to something that looks so…well…SharePointy? Besides, when you see what we do with JQuery in presenting this you’ll change your tune.

Setup

This app still uses SPServices for this as I have not converted over to SharePoint services yet. So here are the usual suspects:

</script>

</script>

src="https://bcbsnc.sharepoint.com/sites/global/ISBA_ProductDelivery/claimacq/jsandjquerystuff/jquery-ui/jquery-ui.js">

</script>

Get the App Info

function GetTops()

{//--Begin Function

//Get Site URL

thissite = $().SPServices.SPGetCurrentSite();

//Display this if on diagram is present

nodoc = "#No Diagram";

var query = "<Query>" +

"<Where><Eq>" +

"<FieldRef Name='Title'/><Value Type='Text'>CAFE</Value>" +

"</Eq></Where>" +

"<GroupBy>" +

"<FieldRef Name='Category'/>" +

"</GroupBy>" +

"<OrderBy>" +

"<FieldRef Name='Category'/>" +

"</OrderBy>" +

"</Query>";

//The Web Service method we are calling, to read list items we use 'GetListItems'

var method = "GetListItems";

//Supply the location and name of the list we are reading data from

var myWebURL = thissite;

var list = "CA_APPS";

//We need to identify the fields we want to return.

var fieldsToRead ="<ViewFields>" +

"<FieldRef Name='ID' />" +

"<FieldRef Name='Title' />" +

"<FieldRef Name='APPNAME' />" +

"<FieldRef Name='APPPIC' />" +

"<FieldRef Name='APPDESC' />" +

"<FieldRef Name='Category' />" +

"<FieldRef Name='Source' />" +

"<FieldRef Name='Floater1' />" +

"</ViewFields>";

//Here is our SPServices Call where we pass in the variables that we set above

//This is where we show the Folder

$().SPServices({

debug: true,

operation: method,

async: false,

webURL: myWebURL,

listName: list,

CAMLViewFields: fieldsToRead,

CAMLQuery: query,

completefunc: function (xData, Status)

{

var showmestuff = $().SPServices.SPDebugXMLHttpResult({ node:xData.responseXML });

//Uncomment the 2 lines below to show what is returned by the web service

//$("#debugMe").append(showmestuff);

//$("#debugMe").show("slow");

//this code iterates through every row of data returned from the web service call

$(xData.responseXML).SPFilterNode("z:row").each(function()

{

//get the ID’s

tabData.ID = ($(this).attr("ows_ID"));

//get the Groups

tabData.title = ($(this).attr("ows_Title"));

//get the Category

tabData.Cat = ($(this).attr("ows_Category"));

//get the App Name

tabData.aname = ($(this).attr("ows_APPNAME"));

//get the Diagrams

tabData.appic = ($(this).attr("ows_APPPIC"));

//get the Descriptions/Text

tabData.desc = ($(this).attr("ows_APPDESC"));

//get the source of the narrative

tabData.src = ($(this).attr("ows_Source"));

//get the Floater Text of the first graphic

tabData.f1 = ($(this).attr("ows_Floater1"));

epicpic = tabData.appic;

if (epicpic === undefined)

{

var showpic ="No Diagram";

}

else

{

//Pictures are stored with the description as a comma delimited field. This will turn the field into an array

var arrpic = epicpic.split(",");

//This will take the 'picture' portion of the field and store it into field

var showpic = arrpic[0];

}

tabData.appic = showpic;

splithyper = tabData.src;

if (splithyper == undefined)

{

tabData.src = "";

}

else

{

var splithyp = splithyper.split(",");

tabData.src = splithyp[0];

tabData.srcname = splithyp[1];

}

//add the data from the row to the table on the screen

AddButtonsToDisplay(tabData);

AddRowToTable(tabData);

});//End SPFilterNode

var link2goback = "<a href=" + thissite + ">Return to SharePoint</a>";

$("#goHome").append(link2goback);

}//End CompleteFunct

});//--End SPServices

} //End GetTopics

So for this SPServices call I’m using SPGetCurrentSite to get the location of the current site.

I’m hardcoding a variable called nodoc to “#No Diagram” in case there is not associated APPPIC.

Then I build the CAML Query, which in this case is pretty easy, I’m pulling all of the items in my list that have ‘CAFÉ’ in the Title and then grouping and ordering by Category.

Then I build my SPServices ‘GetListItems’ function by specifying:

· The Method=GetListItems

· The URL=myWebURL and setting it equal to the value I received from the previous SPService call to SPGetCurrentSite.

· The List Name (list)=’CA_APPS’ (the name of the list)

· The fields I want returned=fieldsToRead which are set to the columns in the CA_APPS list that I want returned.

And here is where the magic happens. I plug in the values above into the respective SPServices parameters (highlighted in yellow).

I assign the values returned to an object that I call tabData. This way I can store multiple rows of data and display them when I want to.

I have to treat my returned data differently if there is not picture associated with it than I do if there is.

I send the resulting tabData object to both AddButtonsToDisplay and AddRowToTable functions to build the page.

The Functions

AddButtonsToDisplay dynamically creates buttons on the screen. AddRowToTable creates the rows of data and hides them until they are summoned by clicking on the dynamically created button. UnhideRow dramatically displays the data as requested (okay…it’s not that dramatic, but it’s still cool). UnhideDiv is responsible for creating the floater text and displaying it.

function AddButtonsToDisplay(tabData)

{

showemall = "";

if (holdCat != tabData.Cat)

{

showemall= "<div>" + tabData.Cat + "</div>";

}

var showemall = showemall + "<button id='"+ tabData.ID + "' type='button'>" + tabData.aname + "</button>";

if (holdCat != tabData.Cat)

{

//showemall= showemall + "</div>";

holdCat = tabData.Cat;

}

$("#listme").append(showemall);

$("#shoButt").show("slow");

}

Takes every ‘AppName’ returned and makes it a button with a unique ID. This ID is used to display the content, diagram, floaters, etc., when the corresponding button is pushed.

///// PLACE ALL DATA INTO HIDDEN TABLE ///////////

function AddRowToTable(tabData)

{

if (tabData.appic=="No Diagram")

{

$("#postTable").append("<div id='" + tabData.ID + "' class='row'><div>" + tabData.aname + "</div></div><div id='" + tabData.ID + "' class='row'><div class='col'>No Image Provided</div></div><div id='"+ tabData.ID + "' class='row'><div id='" + tabData.ID + "' class='row'>" + tabData.desc + "</div></div><div id='" + tabData.ID + "' class='row'><div class='col'><a href='" + tabData.src + "'>Source: Click here for more</a></div></div>");

}

else

{

$("#postTable").append("<div id='" + tabData.ID + "' class='row'><div class='col'>" + tabData.aname + "</div></div><div id='" + tabData.ID + "' class='row'><div class='col'><img id='" + tabData.ID + "' class='grafic' src='" + tabData.appic + "'/></div></div><div id='" + tabData.ID + "' class='row'><div class='col'>" + tabData.desc + "</div></div><div id='" + tabData.ID + "' class='row'><div class='col'><a href='" + tabData.src + "'>Source: Click here for more</a></div></div>");

docarray[tabData.ID]=tabData.f1;

namearray[tabData.ID]=tabData.aname;

//$("#fh").append("<div class='fh'>" + tabData.aname + "</div>");

}

AddRowToTable takes all of the content, diagram, floaters, etc., and places it on the screen and hides it until it is requested through a button click.

postTable is a div with the ID=postTable. This is where we put all the hidden data.

The Result

As you may recall (or can scroll up to) one of our entries in the CA_APP table had an APPNAME of ‘CAFÉ Pharmacy Overview’. This shows what happens with all of the entries with a Title of ‘Café’. They are all returned and their APPNAME entries are made buttons.

The Button Handlers

function unhideDiv(sendID, grphLoc)

{

$("#ShowMyText").offset(function()

{

newPos=new Object();

newPos.left=grphLoc.left+500;

newPos.top=grphLoc.top;

return newPos;

});

text=docarray[sendID];

if (text === undefined)

{

text = namearray[sendID];

}

//alert("sendID=" + sendID);

$("#ShowMyText").append("<div class='slider'>" + text + "</div>");

$("#ShowMyText").show("slow"); //show the box

}

unhideDiv is provided the sendID and the link to the picture that is eventually displayed. When it is called it displays the div container with the corresponding data.

function unhideRow(sendID)

{

var findme = "#" + sendID;

$('.row').each (function()

{

if ($(this).is(findme))

{

$(this).slideDown(3000); //show the row

}

});

}

unhideRow finds the hidden data given the sendID and slowly slides each row it into position.

So when we click on the Café Pharmacy Overview button, the Title, APPIC and Narrative are slowly revealed.

The Floater

And let’s not forget the floater. When you hover over the diagram you see this:

The Full Monty

Well…that’s it. While this code is copy and paste-able, I encourage you to take bits and pieces of it and tweak it to do different things. Remember JQuery has many more animation options than just slidedown. Play with it, have fun and learn something fun and new.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<%@ Page Language="C#" %>

<!DOCTYPE HTML>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

</script>

</script>

src="https://xxx.sharepoint.com/sites/.../jsandjquerystuff/jquery-ui/jquery-ui.js">

</script>

.bigLetter { color:gray; letter-spacing:10px; font-family:Arial, Helvetica, sans-serif; display:none; font-size:medium}

.myHeader { color:; letter-spacing:5px; font-family:Arial, Helvetica, sans-serif; font-size:large}

.instructions {

color:blue; font-family:Arial, Helvetica, sans-serif; font-size:x-small

}

.topmarg { margin:50px }

.boxHead {font-family:Arial, Helvetica, sans-serif; border: 2px solid orange;

padding: 10px 40px; border-radius: 25px; display:none; width:500px}

a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {text-decoration:none;}

a:active {text-decoration:none;}

.floater {font-family:Arial, Helvetica, sans-serif; border: 2px solid black;

padding: 10px 40px; border-radius: 25px; display:none; width:500px; background:yellow; z-index:2; float:left}

.slider {width:200px; height:100px; text-align:left; float:left; color:#CC6600; border-style:groove; border-color:orange;background:#fdf5ce; font-family:Arial, Helvetica, sans-serif; font-size:small; border-radius: 25px; padding:5px;}

.grafic {max-width:1200px;}

.row {display:none}

.flthdr {background:blue; color:white; font-size:small;font-weight:bold}

button

{

width:200px;text-align:left;margin:5px;height:40px;background:#fdf5ce;color:#c77405;

}

{

display:none;

}

div.columns { width: 1500px; }

div.columns div { width: 300px; height: 100px; float: left; }

#butdiv

{

float:left;

}

div.image {

width:200px; text-align:left; background:maroon; color:yellow; z-index:2

}

</style>

<!--[if gte mso 9]>

<SharePoint:CTFieldRefs runat=server Prefix="mso:" FieldList="FileLeafRef,WikiField,_dlc_DocId,_dlc_DocIdUrl,_dlc_DocIdPersistId">

<xml>

<mso:CustomDocumentProperties>

<mso:_dlc_DocId msdt:dt="string">HSYJNS2YZDZT-3050-10</mso:_dlc_DocId>

<mso:_dlc_DocIdItemGuid msdt:dt="string">78812b48-5258-4db1-bd0a-9c226894295f</mso:_dlc_DocIdItemGuid>

<mso:_dlc_DocIdUrl msdt:dt="string">https://xxx.sharepoint.com/sites/.../_layouts/DocIdRedir.aspx?ID=HSYJNS2YZDZT-3050-10, HSYJNS2YZDZT-3050-10</mso:_dlc_DocIdUrl>

</mso:CustomDocumentProperties>

</xml></SharePoint:CTFieldRefs><![endif]-->

</head>

<body>

<div><img height="50px" width="50px" alt="Pic of Coffee" src="https://xxx.sharepoint.com/sites/.../images/CafeOLE.jpg"/></div><div class="ui-state-hover">CAFE Topic Library</div>

<div class="ui-state-hover">Topics</div>

</div>

</div>

/////////////////////////// G L O B A L V A R I A B L E S ///////////////////////////////////////

thisUserGroup="";

thissite="";

docarray=new Array();

namearray=new Array()

docarr="";

howmany=0;

tabData = new Object();

dq = String.fromCharCode(34);

tab = String.fromCharCode(11);

holdCat="";

////////////////////////////// C O D E /////////////////////////////////////////////////////////////

jQuery(document).ready(function($) { //READY

var thisUserName = $().SPServices.SPGetCurrentUser({

fieldName: "Title",

debug: false

});

ShowWelcome(thisUserName);

});// End READY

/********** Show the Welcome *************/

function ShowWelcome(thisUserName)

{

$("#HEADER").append("<p>Welcome, " + thisUserName + "</p>");

$("#HEADER").show();

$("#instruct").show();

GetTops();

}

//======================================================================================================

function GetTops()

{//--Begin Function

//Get Site URL

thissite = $().SPServices.SPGetCurrentSite();

//Display this if on diagram is present

nodoc = "#No Diagram";

var query = "<Query>" +

"<Where><Eq>" +

"<FieldRef Name='Title'/><Value Type='Text'>CAFE</Value>" +

"</Eq></Where>" +

"<GroupBy>" +

"<FieldRef Name='Category'/>" +

"</GroupBy>" +

"<OrderBy>" +

"<FieldRef Name='Category'/>" +

"</OrderBy>" +

"</Query>";

//The Web Service method we are calling, to read list items we use 'GetListItems'

var method = "GetListItems";

//Supply the location and name of the list we are reading data from

var myWebURL = thissite;

var list = "CA_APPS";

//We need to identify the fields we want to return.

var fieldsToRead ="<ViewFields>" +

"<FieldRef Name='ID' />" +

"<FieldRef Name='Title' />" +

"<FieldRef Name='APPNAME' />" +

"<FieldRef Name='APPPIC' />" +

"<FieldRef Name='APPDESC' />" +

"<FieldRef Name='Category' />" +

"<FieldRef Name='Source' />" +

"<FieldRef Name='Floater1' />" +

"</ViewFields>";

//Here is our SPServices Call where we pass in the variables that we set above

//This is where we show the Folder

$().SPServices({

debug: true,

operation: method,

async: false,

webURL: myWebURL,

listName: list,

CAMLViewFields: fieldsToRead,

CAMLQuery: query,

completefunc: function (xData, Status)

{

var showmestuff = $().SPServices.SPDebugXMLHttpResult({ node:xData.responseXML });

//Uncomment the 2 lines below to show what is returned by the web service

//$("#debugMe").append(showmestuff);

//$("#debugMe").show("slow");

//this code iterates through every row of data returned from the web service call

$(xData.responseXML).SPFilterNode("z:row").each(function()

{

//get the Groups

tabData.ID = ($(this).attr("ows_ID"));

//get the Groups

tabData.title = ($(this).attr("ows_Title"));

//get the Category

tabData.Cat = ($(this).attr("ows_Category"));

//get the App Name

tabData.aname = ($(this).attr("ows_APPNAME"));

//get the Diagrams

tabData.appic = ($(this).attr("ows_APPPIC"));

//get the Descriptions/Text

tabData.desc = ($(this).attr("ows_APPDESC"));

//get the source of the narrative

tabData.src = ($(this).attr("ows_Source"));

//get the Floater Text of the first graphic

tabData.f1 = ($(this).attr("ows_Floater1"));

epicpic = tabData.appic;

if (epicpic === undefined)

{

var showpic ="No Diagram";

}

else

{

//Pictures are stored with the description as a comma delimited field. This will turn the field into an array

var arrpic = epicpic.split(",");

//This will take the 'picture' portion of the field and store it into field

var showpic = arrpic[0];

}

tabData.appic = showpic;

splithyper = tabData.src;

if (splithyper == undefined)

{

tabData.src = "";

}

else

{

var splithyp = splithyper.split(",");

tabData.src = splithyp[0];

tabData.srcname = splithyp[1];

}

//add the data from the row to the table on the screen

AddButtonsToDisplay(tabData);

AddRowToTable(tabData);

});//End SPFilterNode

var link2goback = "<a href=" + thissite + ">Return to SharePoint</a>";

$("#goHome").append(link2goback);

}//End CompleteFunct

});//--End SPServices

} //End GetTopics

//=======================================================================================================

/////////PUT BUTTONS ON SCREEN //////////////

function AddButtonsToDisplay(tabData)

{

showemall = "";

if (holdCat != tabData.Cat)

{

showemall= "<div>" + tabData.Cat + "</div>";

}

var showemall = showemall + "<button id='"+ tabData.ID + "' type='button'>" + tabData.aname + "</button>";

if (holdCat != tabData.Cat)

{

//showemall= showemall + "</div>";

holdCat = tabData.Cat;

}

$("#listme").append(showemall);

$("#shoButt").show("slow");

}

///// PLACE ALL DATA INTO HIDDEN TABLE ///////////

function AddRowToTable(tabData)

{

if (tabData.appic=="No Diagram")

{

}

else

{

docarray[tabData.ID]=tabData.f1;

namearray[tabData.ID]=tabData.aname;

//$("#fh").append("<div class='fh'>" + tabData.aname + "</div>");

}

////////// WHEN SOMEONE CLICKS A BUTTON ////////////////////////////////////////////////////////////////////////////

//////// 1. DETERMINE THE ROW ID'S THAT MATCH THE BUTTON ID'S

//////// a. Have to use the ("button").live("click", function()... because the buttons were created dynamically

//////// 2. FIND THE ROWS

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

$("button").live("click",function()

{

$(".row").hide();

var sendID=this.id;

//alert("button id=" + sendID);

unhideRow(sendID);

});

//////////////////// UNHIDE ONLY THOSE ROWS ASSOCIATED WITH THE BUTTON CLICKED ////////////////////////////////

function unhideRow(sendID)

{

var findme = "#" + sendID;

$('.row').each (function()

{

if ($(this).is(findme))

{

$(this).slideDown(3000); //show the row

}

});

}

////////////////////////SHOW BRIEF DESCRIPTION WHEN SOMEONE CLICKS THE IMAGE/////////////////////////////

//////// 1. Determine the ID

//////// 2. Find the floater text that corresponds to the ID

//////// 3. Determine the position to place the floating box

//////// 4. Display the floating box

/////////////////////////////////////////////////////////////////////////////////////////////////////////

$("img").live("mouseover", function()

{

//$("div").hide();

var sendID=this.id;

grphLoc=$(this).offset();

unhideDiv(sendID, grphLoc);

});

function unhideDiv(sendID, grphLoc)

{

$("#ShowMyText").offset(function()

{

newPos=new Object();

newPos.left=grphLoc.left+500;

newPos.top=grphLoc.top;

return newPos;

});

text=docarray[sendID];

if (text === undefined)

{

text = namearray[sendID];

}

//alert("sendID=" + sendID);

$("#ShowMyText").append("<div class='slider'>" + text + "</div>");

$("#ShowMyText").show("slow"); //show the box

}

// Move the mouse away from the graphic, hide the floating box

$("img").live("mouseout", function()

{

$(".slider").hide();

});

</script>

 

</div>

</body>

</html>

Yolanda Yvette McDonald

Wednesday, June 21, 2017

Using SharePoint for Web Content

Background

The Point

The List

The Content

Setup

The Functions

The Result

The Button Handlers

The Full Monty

No comments: