hoozin app sdk - wordpress.com · 2019-04-17 · 5 save time & money, securely. / 47 4. «...

1 / 47 Save time & money, securely. www.hoozin.com

Hoozin App SDK Deployment Guide 19-December-2014 – V2.2

This documentation describes the steps to follow to technically create an application and gives an overview of the application

architecture. N.B. Visual Studio 2010 is required.

Several hoozin concepts have been integrated in order to keep a global overview of hoozin environment.


Summary

I – Overview ................................................................................................................................................ 3

a – Requirements ................................................................................................................................................ 3

c – Different development procedures ......................................................................................................... 3

II – Installation ............................................................................................................................................. 4

III – Hoozin UI description ......................................................................................................................... 4

IV - Hoozin App architecture .................................................................................................................... 6

a – Architecture overview ................................................................................................................................. 6

b – XML definition................................................................................................................................................7

c – Features .......................................................................................................................................................... 8

d – Resources ....................................................................................................................................................... 9

e – Script services ............................................................................................................................................... 10

f – Entities ............................................................................................................................................................. 12

g – Data storage ................................................................................................................................................ 12

IV – Hoozin concepts ............................................................................................................................... 16

a – Hoozin zones ............................................................................................................................................... 16

b – C# factory ..................................................................................................................................................... 17

c – Javascript hoozin.UI .................................................................................................................................... 17

d – Javascript objects ........................................................................................................................................ 21

e – Hoozin context ........................................................................................................................................... 25

f – Mini profiles and Popup content ............................................................................................................ 26

g – Less and bootstrap .................................................................................................................................... 27

h – Notifications ................................................................................................................................................ 29

i – Stream ............................................................................................................................................................ 29

j – Pie charts ....................................................................................................................................................... 30

IV – Data connectors ............................................................................................................................................. 31

V – Scenario ............................................................................................................................................................ 34

Annex 1 - Project template ................................................................................................................................. 45

Annex 2 – Create new hoozin user .................................................................................................................. 46


Annex 3 – Good practices ................................................................................................................................... 47

I – Overview a – Requirements

Software requirements:

SharePoint 2010 ; Visual Studio 2010 ; Framework .Net 3.5 ; Hoozin 14.1.2.0.

Skills needed:

.Net languages: C# and ASPX in particular ; XML and XSLT ; Web technologies: especially HTML, JavaScript and JQuery ; CSS and LESS ; SharePoint notions.

c – Different development procedures Applications are standard SharePoint Solutions. So apps can be developed and deployed as Farm solutions or sandbox solutions.

Farm WSP: Files are located in « 14 » folder and there are less constraints than SandBox solutions. But recycling is necessary during deployment.

Sandbox WSP: Called user solutions too, these WSP are advised because deployment doesn’t need recycling.

This documentation is not compliant with Sandbox solution development.


II – Installation In this document, the name of your application is replaced by the term "MyApp". 1 - Do you have the project template Visual Studio or the setup file with vsix extension? If don’t, go to the second annex at the end of this documentation.

2 - Do you have the set up file with VSIX extension “Prexens.Hoozin.Apps.hoozinAppSDKV2.vsix”?

Yes: Execute the VSIX file and the project will automatically be installed in Visual Studio. If the project is already installed, you must delete it at: %UserProfile%\AppData\Local\Microsoft\VisualStudio\10.0\Extensions No: Move the project template zip file to the correct folder via the following path for example:

…\Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#

3 – In all cases:

a – In Visual Studio 2010, Create a new “Prexens.Hoozin.Apps.MyAppV2” project ;

b – Name your app in the pop-up window, this name will replace “MyApp” ;

c – Build solution, build the WSP and deploy it;

If you don’t have WSP Builder, download it here:

http://wspbuilder.codeplex.com/downloads/get/94507 d – Refresh your AppStore and the application will be displayed. If the application doesn’t appear

in the AppStore, you can refresh apps by using the following code line in your browser console:

III – Hoozin UI description Hoozin interfaces are divided in 5 distinct parts:

1. Header contains search shortcuts and current user log information. It mustn’t be changed by apps.

2. « MainNav » zone contains global navigation. It mustn’t be changed by apps. 3. « SubNav » zone contains the application navigation.

hoozin.Factory.refreshAppList()


4. « Content » zone contains the main page content. 5. « Context » zone contains more information about current page.

An extra window can be called in order to display more information. This window is called « MiniProfile ». This webpart opens on the context, but you can hide it clicking out of MiniProfile or on close button. Here the three zones concerned by the application:

Here the three zones concerned by the application:

And this is a MiniProfile:

subNavZone contentZone contextZone


IV - Hoozin App architecture Below are the details of the basic architecture of a hoozin application from a technical point of view. A typical app project tree is available in the first annex.

a – Architecture overview The project contains 3 folders at the root:

1. Services : includes a C# class "MyAppService" containing web services ;

2. 14 : includes all SharePoint content;

3. Doc : contains this documentation and the Hoozin XML Documentation;

« 14 » includes 3 sub-folders:

1. ISAPI : includes "asmx" files, a text file that is the addressable entry point to the Web service, linked

to the C# class mentioned above;

2. Resources : includes "resx" files for multi-language management;

3. Template : contains among other Features, images and layouts folder.

Template folder contains 4 sub-folders:

1. Features : contains aspx page definitions, webparts and the app ID;

2. Images : contains images used in the application;

3. Layouts : contains LESS (CSS), JavaScript and XSLT files ;

4. XML : contains the dataconfiguration.hoozin.apps.MyApp.xml, useful to implement Mini Profiles or

Popup content and MyApp.xml file which contains the Application definition.


b – XML definition The application definition is defined in MyApp.xml in XML folder.

ID : GUID, it must be the same as the Guid included in features.xml and in XSLT pages.

Name : application name.

DisplayName : name displayed in the AppStore and in the main nav.

MainNavSubTitle : name subtitle, displayed under the icon in the main nav.

Description : displayed in the application mini profile and in the banner.

FolderContentTypeName : name of the app folder in elements.xml.

HomeUrl : home page of the application.

Issuer, Evaluation, Category, LastUpdate,, Version and languages are information for the AppStore.

<App> <ID>0f5e8531-c663-4072-bf3d-05dcf4981933</ID> <Name>MyApp</Name> <DisplayName>MyApp</DisplayName> <MainNavSubTitle>A SDK AppMainNavSubTitle> <Description>Description</Description> <FolderContentTypeName>HoozinAppMyAppFolder</FolderContentTypeName> <HomeUrl>hoozinApps/MyApp/MainView.aspx</HomeUrl> <Icon>/_layouts/images/Prexens/Hoozin/Apps/MyApp/AppStore/app-MyApp-sprite.png</Icon> <BackgroundImage>/_layouts/images/Prexens/Hoozin/Apps/UnitTests/unittests-background.jpg</BackgroundImage> <MenuIcon>Apps/UnitTests/SVG/app-unittests-menu-icon.svg</MenuIcon> <Issuer>Hoozin.com</Issuer> <Evaluation>5</Evaluation> <Category>Productivity</Category> <LastUpdate>2012-08-11 00:00:00.000</LastUpdate> <Version>1.5.3</Version> <Languages> <Language>Français</Language> <Language>English</Language> </Languages> <StreamIcon>/_layouts/images/Prexens/Hoozin/Apps/MyApp/Stream/app-MyApp-identifier.png</StreamIcon>

</App>


Example on Helpdesk application:

c – Features Hoozin apps are based on SharePoint features. “Features” folder includes XML files, ASPX pages and WebParts.

features.xml : contains the application Guid, ASPX pages and WebPart definitions :

elements.xml : contains the declaration of the « app folder » which includes hoozin posts, it also

contains « extend properties » definition and the link with resources files on server side;

hoozin-myappapp-pages.xml includes relation between aspx pages and webparts;

Webparts link to xslt files :

aspx pages;

MainNavSubTitle MenuIcon

DisplayName

Icon

Description

BackgroundImage

<Feature Id="c9334bba-c34e-4c37-a17e-9977624d2c08" … />

<TemplateUrl>/_layouts/Prexens/Hoozin/Apps/MyApp/XSLT/MainViewContent.xslt</TemplateUrl>


To add a new page, follow these steps:

1. Create the aspx page in “Pages” folder; 2. Create the webpart page in “WebParts” folder; 3. List them in feature.xml;

4. Link them in hoozin-myappapp-pages.xml as the mainView example;

5. Create the XSLT used in the webpart;

d – Resources There are 2 differents file types:

1. Prexens.Hoozin.Apps.MyApp.Client.<culture>.resx file by culture for the location of files on the client side (JavaScript);

2. A Prexens.Hoozin.Apps.MyApp.<culture>.resx file by culture for the location of files on the server side (C#, ASP, XML and XSLT in particular);

3. A Prexens.Hoozin.Apps.MyApp.Client.resx.scriptx file that sets the JavaScript variable to use in the code to access resources:

To use resources in your code:

XSLT

JavaScript:

XML

ASPX :

<ElementFile Location="WebPartPages\Pages\MyPage.aspx" /> <ElementFileLocation="WebPartPages\WebParts\ >MyPageContent.webpart" />

<root xmlns="http://schemas.microsoft.com/sharepoint/resxscriptx" javascriptClassName="_prexensHoozinAppsMyAppClient" shouldCamelCaseIdentifiers="false"/>

<a id="Link" href="MainView.aspx" title="{pxs:GetResource('Prexens.Hoozin.Apps.MyApp,'ResourceKey')}"> <xsl:value-of select="pxs:GetResource('Prexens.Hoozin.Apps.Helpdesk','ResourceKey')" />

</a>

_prexensHoozinAppsMyAppClient.ResourceKey

{Resource:Prexens.Hoozin.Apps.MyApp, ResourceKey}

<SharePoint:EncodedLiteral ID="EncodedLiteral1" runat="server" Text="<%$ PXSHiveResources:Prexens.Hoozin.Apps.MyApp, ResourceKey %>" />


C#

e – Script services Script methods for services are in the c# class MyAppService in Services folder. The ASMX file in ISAPI link the c# class MyAppService.cs with the JavaScript file MyAppServices.js

In JavaScript fileMyAppServices.js, there is the link with the ASMX file.

Reporting methods of c# class MyAppService is done in the following way: Finally script services can be called in javascript :

ResourcesUtils.GetResource("Prexens.Hoozin.Apps.MyApp", “resourceKey”);

[WebMethod(Description = "Web Method Description")] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public void MyScriptMethod(Guid siteId, Guid webId, int myParam){}

<%@ WebService Class="Prexens.Hoozin.Apps.MyApp.Services.MyAppService, Prexens.Hoozin.Apps. MyApp, Version=1.0.0.0, Culture=neutral, PublicKeyToken=01ea6d670e62bde9 " %>

var _services = { search: '/_vti_bin/Prexens/Hoozin/Apps/MyApp/MyAppService.asmx'

};

this.myScriptMethod = function (myParam, callBackSuccess, callBackError) { _jsonAjaxPost( 'search', ‘MyScriptMethod’, { siteId: _siteId, webId: _webId, myParam: myParam }, callBackSuccess, callBackError ); }

var MyAppServices = new MyAppServices( '<xsl:value-of select="$current_site_collection_id" />', '<xsl:value-of select="$current_site_id" />' ); MyAppServices.myScriptMethod(

myParam, function () { //Can add some code here, with the method succeeded

} );


f – Entities An entity is a “sub element” of an application and he is associated to a stream.

In hoozin, stream can be defined for:

Main stream Discussion stream Community stream Application stream Entity stream

An entity is a link between an application item and a stream. It’s useful to create a stream to a part of your application (Event, Document, Etc…) There are 5 important points about entities:

1. An entity belongs to an app. 2. An app can use one or more entities. 3. Entity is referenced in its app XML definition. 4. Entity can have its own stream. 5. Entity post rendering can be customized.

You can see how to use entities in part V.

g – Data storage Data must be isolated in application context. A SharePoint List can be used. To retrieve data from the SPList, can use the SPConnectorQuery connector described in section IV. You can create a list during the application installation, insert items in the list and retrieve this data.

In the project template and the demo app, a complete example of this cycle is available.

List creation

The list can be automatically created when the application is installed in the community thanks to the feature “hoozinAppMyAppLists”. This feature contains the Hoozin-apps-MyApp-base-lists.xml which allows the developer to define which list will be created and its fields. Here the architecture:

Here is the xml file contain:

You can’t create complex types as look ups with this prexens technology. These types are available for example:

Text; Boolean; DateTime;

If you must create look ups, develop a new feature with your own receiver. You can decide dependencies between features thanks this tag in a feature XML.

<ListInstancesDefinition>  <ListInstance Title="MyList" Description="" Url="Lists/MyList" TemplateType="GenericList" //DocumentLibrary is possible OnQuickLaunch="true" ContentTypesEnabled="true" EnableVersioning="false" Hidden="false">  <Field InternalName="MyListTitle" DisplayName="MyListTitle" Type="Text" Required="false" /> <Field InternalName="MyListBool" DisplayName="MyListBool" Type="Boolean" Required="false" /> </ListInstancesDefinition>

<Feature Id="current feature guid" Title="Hoozin - Apps - MyApp" Description="Hoozin MyApp application" ImageUrl="Prexens/Hoozin/HoozinFeature.png" Hidden="FALSE" Scope="Web" DefaultResourceFile="core" xmlns="http://schemas.microsoft.com/sharepoint/" ReceiverAssembly="Prexens.SharePoint.Engine, Version=14.0.0.0, Culture=neutral, PublicKeyToken=0afb724dcb92ffcb" ReceiverClass="Prexens.SharePoint.Engine.WebPartPages.ProvisionningFeatureReceiver"> <ActivationDependencies> <ActivationDependency FeatureId="Feature ID (guid) to activate after the current feature" /> </ActivationDependencies> </Feature>

Insert data into SharePoint list There are a lot of possibilities to insert data into a SharePoint list. You can use the script service as in example in the project template of the SDK (V 0.0.7). Thanks to script services, you can use C# code in the client side JavaScript (cf documentation part III a). Then, the code can be very simple:

Retrieve data from the list

You can retrieve data from the list in the XSLT thanks to the SPQueryConnector (cf documentation part IV). The XSLT is linked to the webpart. In XSLT, you can retrieve the data as following:

[WebMethod(Description = "Add item to list")] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public void AddItemToMyList(Guid siteId, Guid webId, Boolean myParam) { using (SPSite site = new SPSite(siteId)) using (SPWeb web = site.OpenWeb(webId)) { //Replace the list.update() web.AllowUnsafeUpdates = true; SPList list = web.GetListFromRelativeUrl("Lists/MyList");

SPListItem insertItem = list.Items.Add(); insertItem["MyListTitle"] = "Item" + list.ItemCount; insertItem["MyListBool"] = myParam; insertItem.Update(); } } }

 <xsl:template match="/DocumentElement">

<ul> <xsl:for-each select="MyList">

<xsl:variable name="my-list-title" select="MyListTitle" /> <xsl:variable name="my-list-author" select="Author" />

<li><xsl:value-of select="$my-list-title"/> created by <xsl:value-of select="$my-list-

author"/></li> </xsl:for-each>

</ul> </xsl:template>


You can see how the xml is built in the XSLT thanks to the XMP tag, but beware, the result may be in lowercase letters:

Here the result:

You can copy this result in a XML file in visual studio to visualize correctly data from your list.

<xmp> <xsl:copy-of select="."/> </xmp>


IV – Hoozin concepts In order to develop an application, you may use hoozin functionalities. Most of these features are detailed in the documentation available here in hoozin: yourSiteUrl/Documentation.aspx

a – Hoozin zones

A typical hoozin page contains 3 main webparts :

subNavZone : sub menu ;

contentZone : main content of the page;

contextZone : right side zone, contains global information or action buttons.

Here an ordinary ASPX file :

It’s advised to copy past the ASPX contain during each new page creation process. The zone names are very important, they are used for callback loading explained in part III.c.

<asp:Content ID="Content2" ContentPlaceHolderId="PlaceHolderMain" runat="server"> <div id="subNavZone"> <WebPartPages:WebPartZone runat="server" Title="loc:WebPartSubNav" ID="WebPartSubNav" CssClass="subNavZone" FrameType="None"> <ZoneTemplate></ZoneTemplate> </WebPartPages:WebPartZone> </div> <div id="contentZone" class="contentHeight"> <div id="subContent"> <WebPartPages:WebPartZone runat="server" Title="loc:WebPartContent" ID="WebPartContent" CssClass="contentZone" FrameType="None"> <ZoneTemplate></ZoneTemplate> </WebPartPages:WebPartZone> </div> </div> <div id="contextZone" class="contentHeight"> <div id="context"> <div id="contextCloseWrapper"> <div class="closeButton"> </div> <h2> <asp:label ID="Label1" runat="server" Text="<%$ PXSHiveResources:Prexens.Hoozin.SharePoint,Context_Close %>" /> </h2> </div> <div id="contextContent">

<WebPartPages:WebPartZone runat="server" Title="loc:WebPartContext" ID="WebPartContext"

CssClass="contextZone" FrameType="None"> <ZoneTemplate></ZoneTemplate> </WebPartPages:WebPartZone> </div> </div> </div> </asp:Content>


b – C# factory XML documentation about hoozin methods is available on the Doc folder at the project root. More useful methods are defined in the hoozin factory. You can call the factory after reference the library in the class. The methods list is available in the documentation, but for summary, you can do actions around:

Users; Circles; Discussions; Communities; Community Groups

There are a few examples in the C# class MyAppService.cs. Notice that you can use these methods in JavaScript with script services thanks to hoozinFactory.js which references a portion of factory methods:

c – Javascript hoozin.UI Some examples are available in the file “example.js”. There are 3 main important functionalities:

1- « Register » to bind the UI with application, can be used in each page as in MainView.xslt. For using callback loading into app pages, it’s necessary to register each page:

using Prexens.Hoozin.Utility; Factory hoozinFactory = Factory.GetCurrentFactory();

hoozin.Factory.createCommunityGroup( $("#CommunityGroupName").val(), function () { //Executed when the page is refreshed }, function () { //Executed when an error occured }

);

///<summary> ///Register zone ///</summary> ///<param name="zone">SubNavZone (Left menu), contentZone or contextZone</param> ///<param name="description">Register name</param> ///<param name="webPartStorageKey">Web part storage key</param> ///<param name="object"> </param> ///<param name="page">Current page</param> hoozin.UI.register = function (zone, description, webPartStorageKey, object, page) { }


For example:

2- “Refresh” allows you to refresh your page or another element : For example:

3- “Load” allows you to load a page in callback, useful for the navigation

It can be used as following:

///<summary> ///Refresh element zone content ///</summary> ///<param name="params">Webpart params</param> ///<param name="ignoreFilters">Boolean Ignore filters</param> ///<param name="isCallBack">Boolean type</param> ///<param name="successMethod">Function executed when success</param> ///<param name="appendProcessMethod"></param> ///<param name="closeLoader">Boolean: close loader when the zone is refreshed</param> hoozin.UI.refresh = function (params, ignoreFilters, isCallBack, successMethod, appendProcessMethod, closeLoader) { }

hoozin.UI.register( "contentZone", "appMyAppContent", "<xsl:value-of select="$webpart_storagekey" />", null, "<xsl:value-of select="$current_page_serverrelativeurl" />");

Hoozin.UI.refresh(null, null, null, null, function() { //Executed when the page is refreshed

hoozin.Confirm.closeConfirm(); } );

///<summary> ///Gets the issue attachments. Call this function before hoozin.UI.load() ///</summary> ///<param name="page">The aspx page to display</param> ///<param name="zone">zone to refresh</param> ///<param name="description">hoozin.UI registred to refresh(see above in register)</param> ///<param name="filter"></param> ///<param name="params"></param> hoozin.UI.addObjectToLoad = function (page, zone, description, filter, params) { } hoozin.UI.load();

//On a click event for example var href = '<xsl:value-of select="$web-relative-url" />/hoozinApps/MyApp/ManageIssue.aspx?idIssue='+$(this).attr('data-issue-id'); hoozin.UI.addObjectToLoad(href, 'contentZone'); hoozin.UI.load();


More, usually JavaScript on each page

Callback link Link tags <a> must have the “hoozinLink” class to load hoozin pages in callback. You can add functionalities to the link: - Data-filter: to remove entity and reset post params, - Data-target: to load the correct registered zone If you want to load several zones: “contentZone,contextZone” and avoid spaces. You can simulate a hoozin.UI.load() using:

//Active subNav menu link hoozin.Interface.activeSubMenu('link ID'); //Remove entity to bind the post box with the app and not with the entity. hoozin.HeaderPostZone.removeEntity(); //Set filter for the stream, after this instruction, stream will display only entity posts //’EntityId’ never change Hoozin.UI.setFilter('EntityId', “EntityID value" />'); //Add properties to the post. hoozin.HeaderPostZone.setPostExtendedProperties( { Param : 'ParamValue' });

data-filter="hoozin.HeaderPostZone.removeFilter('EntityId');"

data-target="contentZone"

<a class=”hoozin Link” href=”destination” data-target=”zone”/>


hoozin.UI main functionalities overview:


d – Javascript objects There are several JavaScript objects in hoozin useful to facilitate the development.

hoozin.Popup and hoozin.Confirm hoozin.Popup is hoozin JavaScript object to open a pop up:

The content to display (the aspx page) in the window should be in a <div id="popupContent">.

Here the result:

hoozin.Popup.open( { title: "Check in file", // Window title urlToLoad: "url to load (aspx page)", isClosable:true, //Is closable loaderWidth:”60%”, //Window width, use only % for responsive loaderHeigh:1000,//Window height, default value: auto popupType: 'scroll', //Popup type (scroll or center) showLoadingIcon:true, //Show loadingIcon } );


hoozin.Confirm is hoozin JavaScript object to open a window alert:

Here the result:

hoozin.Confirm.openConfirm( { title: "Please confirm:", //Window title

isClosable: true, //Is closable message: “Are you sure you want to delete this post", //Alert message buttons: [

{ buttonLabel: "OK", buttonClass: ‘btn-primary’, buttonFunction: hideConfirm //can call a function }, { buttonLabel: "Cancel", buttonClass:'btn', buttonFunction:

function() { //Code to do in close case for example hoozin.Confirm.closeConfirm(); } } ] } );


hoozin.PeoplePicker

You can call a people picker object directly in your code. Call the function open from the hoozinPeoplePicker object and give a JSON object in parameter Here the result:

hoozin.PeoplePicker.open( { peoplePickerTitle : string, //PeoplePicker popup title searchContexts : JSON, //Search context, community members for example filterContexts : JSON, //Avoid this context, ignore community members for example arrIgnoredSids : string[], //Ignore users (Sids) in the research. Null if you don’t want to ignore. addManualUsers : Boolean, //Add user according to the research but inexistent hoozin users getExternalUsers : Boolean, //Get external users or not, true by default getGroups : Boolean, //Get groups in the research, false by default onValidateFn : function //Function to call on validate button } );


searchContexts and filterContexts have a specific function. They are JSON object built as following: searchContext {'context ID':'hoozinContext'} if you want to research in a specific context (community, group, discussion or community group), or null if you want to search everywhere filterContext {'context ID':'hoozinContext'} if you don't want to retrieve user of a context, or null if you don't want to filter on context The context ID is the object unique identifier. For example, it’s the Sid for user or the web GUID for the community.

The hoozinContext is a string and the correct possibilities are:

“HoozinCommunity”, “HoozinCircle” for groups, “HoozinDiscussion” or “HoozinCommunityGroup”

hoozin.utils

It contains a set of useful functions.

hoozin.browser

Return an object with the browser information. So, it’s possible to create a specific code for particular browser even if it must be avoided if possible.

Hoozin functions

Hoozin provides several useful functions like “hasValue(value)” to test if a value is null, undefined or empty string.

Don’t hesitate to use the browser JavaScript console to have a look on hoozin client model.

You can retrieve each JS function signature using the function get(“functionName”). For example:

hoozin.Factory.get('getCommunityMembers')


e – Hoozin context Some information about current hoozin context are already available in server side and client side. Context contains current user, current community and current application global information.

Server side C#

An object is accessible in your c# code after importing hoozin.dll.

This code line returns a XPathNavigator which you can parse. XSLT

You can include another XSLT file into your current XSLT file :

This import provides a XML content which you can visualize using XMP tag: For example, it’s possible to retrieve current user identifier writing:

Client side

In JavaScript, there are hoozin functions to retrieve context information. But complete context is not available. You can for example retrieve current user name but not current community.

Samples: hoozin.currentUserName, hoozin.currentUserSid or hoozin.webRelativeUrl

Hoozin.ContextManager.GetContext()

<xsl:include href="/_layouts/Prexens/Hoozin/XSLT/includes/context.xslt" />

<xmp><xsl:copy-of select=”$context”/><xmp>

<xsl:variable name="current-user-sid" select="$context/CurrentUserProfile/Sid" />


f – Mini profiles and Popup content A mini profile is a web part which you can call to display more information about an element. Hoozin uses Mini Profiles to display community or user information before access to the community or the complete user profile clicking on an avatar. The mini profile appear on the context and it quits when a click is done out of its content. The advantage of Mini profile is that you can declare a webpart without an aspx file. Juste create your webpart, declare it in the feature.xml as in part II.c and declare a new template in the dataconfiguration.hoozin.apps.MyApp.xml.

Then, “miniProfileName” can be call in html on a link tag or another DOM element:

Thanks to a link tag:

Thanks to a DOM element : Same, you can add a template and call it in a popup window:

<Template ID="new GUID" Name="miniProfileName" DataTransformationWebPart="/TEMPLATE/FEATURES/HoozinAppsMyApp/WebPartPages/WebParts/miniProfileWebPart.webpart" />

<a href="HoozinData.axd?settings=hoozin.apps.MyApp&name=miniProfileName" class="showMiniProfile">show me</a>

<div data-href="HoozinData.axd?settings=hoozin.apps.MyApp&name=miniProfileName" class="showMiniProfile"></div>

hoozin.Popup.open( { title: ‘popup title’, isClosable:true, urlToLoad: 'HoozinData.axd?settings=hoozin.apps.MyApp&name=miniProfileName, popupType: 'scroll' });


g – Less and bootstrap

Less

SDK provide a LESS file by default for the design. You can code CSS lines in this file if you don’t know less. But you can learn about this CSS extension here: http://lesscss.org/ Thanks to less, you can code CSS like an object model, including variables, functions and encapsulation notions. Here an example LESS at the left and CSS at the right:

Use the class “appMyApp” in your DOM elements to encapsulate your code in order to not target hoozin main code. In this LESS code, there are some particularities:

The class graybutton is encapsulate in class appMyApp @grayButtonBg is a LESS variable defined in hoozin core.

& is used to target the current class. Mixins are functions like .box-shadow(…) defined in a LESS mixins file in hoozin core.

Feel free to create your own variable or mixins file in application.

Bootstrap Hoozin uses Bootstrap license in order to provide a list of classes for your classic DOM. For example, you can use the class ‘btn’ and ‘btn-primary’ without write one CSS code line.

.appMyApp{ position: relative; .grayButton { position: relative; border: 1px solid @grayButtonBorder; background-color: @grayButtonBg; text-align: center; cursor: pointer; color: @grayButtonColor; &:hover { color: @grayButtonColorHover; text-decoration: none; .box-shadow(0 0 6px @variable); } } }

.appMyApp{ position: relative; } .appMyApp .grayButton { position: relative; border: 1px solid 0 red; background-color: gray; text-align: center; cursor: pointer; color: green; } .appMyApp .grayButton:hover { color: gray; text-decoration: none; }


Here the result: Bootstrap provides icons too. So you can add an icon to your buttons.

Here the result and the code:

Hoozin CSS

Hoozin provides CSS classes too. For example, you can use the class “hoozinTooltip” on a DOM element in order to display a designed tooltip.

Here the result:

All this information is detailed in hoozin documentation accessible via this link:

yourSiteUrl/Documentation.aspx Hoozin preconizes to use sprite for images in order to provide the better result possible on retina screens ( SmartPhones and other recent devices).

<a class="btn btn-primary" title="ma" href="javascript:void(0);" data-target="subNavZone,contentZone,contextZone" > <i class="icon-trash icon-white"></i> Submit a request </a>


h – Notifications Notifications are useful to alert hoozin users about new content. A notification is automatically added when a post is submitted to the stream. Today, it is no possible to add a notification by another way.

i – Stream To post in the stream, you must write an html and call a JavaScript function. For the moment, CSS isn’t included in hoozin, so your post can’t be designed in the myStream or in the community stream. So don’t use CSS class in the htmlTweet.

var htmlTweet = “<div style=’color:red’>My post content</div>” hoozin.Factory.post(

audiences, // string array containing user SID. It used to create discussions tags, //string array

null, ‘Raw tweet ’, // Raw displayed in notification

htmlTweet, // HTML hoozin.Factory.getPostPluginJsonParams(), { 'AppId': '<xsl:value-of select="$app-id" />' },

function (postId) { //Code executed when success }, logErrorToConsole );


j – Pie charts You can include simple charts into applications.

1. Include this file in XSLT:

2. Build the XML as following:

3. Call this template to display charts:

<xsl:include href="/_layouts/Prexens/Hoozin/XSLT/includes/chart.xslt" />

<xsl:variable name="correct-node"> <hoozin>

<GlobalNode> <MyNode> <name>Open</name> <!—legend value --> <value>Open</value> </MyNode>

<MyNode> <name>Close</name> <value>Close</value> </MyNode> </GlobalNode> </hoozin> </xsl:variable>

<div class="hightchartsWrapper" id="domID">

<xsl:call-template name="hoozin-chart"> <xsl:with-param select="$correct-node" name="node"/> <!—previous node--> <xsl:with-param select="’domID’" name="container"/> <!—DOM container ID --> <xsl:with-param select="'pie'" name="type"/> <!—chart type, can be pie ->

<xsl:with-param select="’Request status’" name="serie-name"/> <xsl:with-param select="false()" name="data-labels"/> <!—arrows linked to part (legend) --> <xsl:with-param select="true()" name="show-in-legend"/><!—typical legend under chart (legend) --> <xsl:with-param select="'bottom'" name="legend-vertical-align"/>

<xsl:with-param select="'center'" name="legend-align"/> <xsl:with-param select="true()" name="navigation"/> <xsl:with-param name="colors" select="'#FF9200,#FF6700’" /> <!—one color by series --> <xsl:with-param name="total-height" select="200" /> <xsl:with-param name="total-width" select="200" />

<xsl:with-param name="margin-top" select="0"/> <xsl:with-param name="data-labels-inside" select="true()"/>

<xsl:with-param name="total-in-legend" select="'total'"/> <xsl:with-param name="data-labels-distance" select="-45"/> <xsl:with-param name="value-in-tooltip" select="false()"/> <xsl:with-param name="percent-in-tooltip" select="true()"/> <xsl:with-param name="show-tooltip" select="true()"/> </xsl:call-template> </div>

Figure 1 - Result


IV – Data connectors In order to have XML data into XSLT files, you must use connector in webparts. Have a look on SPQueryConnector if the connectors/webparts notion is not well-known. This part could be improved with a more detailed connectors list. You can use hoozin connectors or hoozin.Apps connectors: - Hoozin connectors:

Prexens.Hoozin.ContentViewer.Connectors, Version=14.0.0.0, Culture=neutral, PublicKeyToken=fda8b0e1c553e5d0

HoozinContext to retrieve current context; HoozinProfiles to retrieve users; HoozinProfile to retrieve a specific profile; HoozinCommunities to retrieve communities; HoozinCommunity to retrieve a specific community; HoozinCommunityMembers to retrieve specific community members; HoozinCircles to retrieve Circles; HoozinDiscussions to retrieve Discussions; HoozinDiscussion to retrieve a specific Discussion; HoozinIndexedPosts to retrieve stream posts; HoozinPost to retrieve a specific post;

- Apps connectors:

Prexens.Hoozin.Apps.Connectors, Version=14.0.0.0, Culture=neutral, PublicKeyToken=e8f6329db97c5dc9

SPQuery to retrieve data from SharePoint list; SPSiteDataQuery to retrieve data from several lists; Project to parse and process Microsoft Project files; SQLServer to request SQL server data; XML to retrieve public or private XML feed (RSS, Atom, etc…); Exchange to request Microsoft Exchange data; WebService to access to remote SOAP services ;


1. SPQueryConnector This connector is very useful to retrieve data stored in SharePoint lists. It’s possible to choose field values to retrieve. To use it, update your webpart as following: In red, there is the content added or modified to the webpart file ‘MainViewContent’

<DocumentElement xmlns="http://tempuri.org/ContentViewerSettingsView.xsd"> <GlobalSettings> <DataCacheEnabled>false</DataCacheEnabled>

<DataCacheDuration>0</DataCacheDuration> <TemplateUrl>/_layouts/Prexens/Hoozin/ Apps/MyApp/MainView.xslt</TemplateUrl>

<DataConnectorID>SPQuery</DataConnectorID> <DataConnectorTypeName> Prexens.Hoozin.Apps.Connectors.SPQueryConnector.DataProvider, Prexens.Hoozin.Apps.Connectors, Version=14.0.0.0, Culture=neutral, PublicKeyToken=e8f6329db97c5dc9

</DataConnectorTypeName> <PortletEnabled>false</PortletEnabled> <PortletTemplateUrl /> <TemplateCacheDisabled>false</TemplateCacheDisabled> <AsynchronousLoadingEnabled>false</AsynchronousLoadingEnabled> <AsynchronousRefreshDuration>0</AsynchronousRefreshDuration> <AsynchronousRefreshEnabled>false</AsynchronousRefreshEnabled> </GlobalSettings> </DocumentElement> <DataConnectorSettingsView xmlns="http://tempuri.org/DataConnectorSettingsView.xsd"> <ViewFields>

<Name>Title</Name> </ViewFields> <ViewFields> <Name>UniqueId</Name> </ViewFields> <ViewFields>

<Name>ID</Name> </ViewFields> <Settings>

<GetItemFromQueryString>false</GetItemFromQueryString> <ItemQueryStringKey /> <XmlDataFormat>DataTable</XmlDataFormat> <SiteCollectionUrl>{SPContext.Current:Site.ServerRelativeUrl}</SiteCollectionUrl> <SiteCollectionID>9d85fd8d-5b13-462f-97c9-6f6484a84d36</SiteCollectionID> <RowLimit>500</RowLimit> <AllowPaging>false</AllowPaging> <RunWithElevatedPrivilege>false</RunWithElevatedPrivilege> <ListID>2dc022b8-417c-4b8b-a7f1-b417c2e4d8e1</ListID> <ListName>Your list</ListName> <ViewName /> <ViewID>00000000-0000-0000-0000-000000000000</ViewID> <WebUrl>{SPContext.Current:Web.ServerRelativeUrl}/</WebUrl> <WebID>2e269093-84ab-432a-8301-415c6b8d4de2</WebID> <Query>SPQuery</Query> <UseViewFields>false</UseViewFields> <ItemID>-1</ItemID>


<KeepViewQuery>true</KeepViewQuery> <UseListFields>false</UseListFields> <OverrideRowLimit>false</OverrideRowLimit> <FilterCriterias><NewDataSet><xs:schema id="NewDataSet" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata"><xs:element name="NewDataSet" msdata:IsDataSet="true" msdata:UseCurrentLocale="true"><xs:complexType><xs:choice minOccurs="0" maxOccurs="unbounded"><xs:element name="Query"><xs:complexType><xs:sequence><xs:element name="InternalName" type="xs:string" minOccurs="0" /><xs:element name="FieldType" type="xs:string" minOccurs="0" /><xs:element name="ComparisonOperator" type="xs:string" minOccurs="0" /><xs:element name="Value" msdata:DataType="System.Object, mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" type="xs:anyType" minOccurs="0" /><xs:element name="CombinationOperator" type="xs:string" minOccurs="0" /><xs:element name="IgnoreIfEmpty" type="xs:boolean" minOccurs="0" /><xs:element name="UseLookupId" type="xs:boolean" minOccurs="0" /></xs:sequence></xs:complexType></xs:element><xs:element name="Sort"><xs:complexType><xs:sequence><xs:element name="FieldRef" type="xs:string" minOccurs="0" /><xs:element name="Ascending" type="xs:string" minOccurs="0" /></xs:sequence></xs:complexType></xs:element></xs:choice></xs:complexType></xs:element></xs:schema><Query><InternalName>IssueStatus</InternalName><FieldType>Text</FieldType><ComparisonOperator>IsNotEquals</ComparisonOperator><Value xsi:type="xs:string" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">closed</Value><CombinationOperator>And</CombinationOperator><IgnoreIfEmpty>false</IgnoreIfEmpty><UseLookupId>false</UseLookupId></Query><Sort><FieldRef>Created</FieldRef><Ascending>false</Ascending></Sort></NewDataSet> </FilterCriterias> <Folder /> <Recursive>false</Recursive> </Settings>


V – Scenario Here a scenario which describe step by step a app creation.

1. Installation and preparation

Get VSIX File (App SDK setup)

Install the project template as explain in part II. In this scenario, the vsix is available. Download VSIX file and execute it. After this installation, you can create a Prexens Hoozin App project in Visual Studio 2010. (If the project template doesn’t appear in the list, restart your Visual Studio).

Figure 2 - VSIX setup interface


Create new Visual project

Figure 3 - Visual Studio new project window

After clicking on “OK” button, choose the app name. The app name define folders and files name.

Figure 4 - Wizard interface to choose app name


Deploy WSP

After submit, you can see the project architecture as in Annex 1 of this documentation.

Now you can build the WSP and deploy/upgrade it. WSP Builder is advised. If you don’t have WSP Builder, download it here:

http://wspbuilder.codeplex.com/downloads/get/94507

Install app from hoozin AppStore

If application doesn’t appear in AppStore, refresh the app list using following code line in your browser JavaScript console:

Hoozin.Factory.refreshAppList()

2. Change images

SDK provides default images. You can change them to personalize your app.

In this folder, three folders are included by default:

Relative to “MenuIcon” node of the application configuration XML. SVG folder contains hoozin menu icon, there is a SVG file:

You can create a SVG file thanks to a vector drawing software as Illustrator.

Relative to “StreamIcon” node. Stream folder contains identifier icons positioned at the bottom right of posts. The green background is created by default, just provide an image with transparent background;

Relative to “Icon” node. AppStore folder contains application images displayed in the hoozin appStore. This image is also displayed in the hoozin app header context.

Relative to “BackgroundImage” node. The application background header can be personalized, You must fill the node, but a default image is provided by SDK.

3. Create your first page The app home page by default is MainView.aspx. You can use it or change it. Here, we will create a new ASPX page named Home.aspx.

New ASPX file : copy past MainView.aspx content in your new home.aspx file ; New WebPart file : copy past MainViewContent.webpart content for the moment in new

homeContent.webpart file. We add the keyword Content after the page name in order to precise hoozin zone. (See part I.b about hoozin zones). Reference XSLT file linked to the WebPart. We use in general same name for XSLT and WebPart files.

Create XSLT file with same name as referenced in WebPart file ;

Reference ASPX and WebPart files in the feature.xml ;

 <ElementFile Location="WebPartPages\Pages\MainView.aspx" /> <ElementFile Location="WebPartPages\Pages\StreamView.aspx" /> <ElementFile Location="WebPartPages\Pages\Home.aspx" />  <ElementFile Location="WebPartPages\WebParts\MainViewContent.webpart" /> <ElementFile Location="WebPartPages\WebParts\StreamViewContent.webpart" /> <ElementFile Location="WebPartPages\WebParts\SubNav.webpart" /> <ElementFile Location="WebPartPages\WebParts\Context.webpart" /> <ElementFile Location="WebPartPages\WebParts\HomeContent.webpart" />

<TemplateUrl>/_layouts/Prexens/Hoozin/Apps/MyApp/XSLT/HomeContent.xslt</TemplateUrl>


Associate WebParts and ASPX in Hoozin-apps-MyApp-base-lists.xml ;

Change the app home page in the configuration file :

4. Use data connectors

If you want to retrieve data from SharePoint List into your XSLT file, it’s advised to use data connectors (More details in part IV).

In this scenario, we want to retrieve data from the SharePoint list “MyList” created by feature “HoozinAppsMyAppLists”.

Change WebPart connector definition and settings in HomeContent.WebPart (See part IV). Retrieve data in your XSLT (see part III.g).

<WebPartPage> <Page File="Pages\Home.aspx" DestinationListUrl="HoozinApps" DestinationFolderUrl="MyApp" FileProvisionMode="OverwriteExistingIfNotCustomized" /> <WebPart Title="Content" File="WebParts\HomeContent.webpart" ZoneId="WebPartContent" Group="Hoozin - App - MyApp" /> <WebPart Title="Context" File="WebParts\Context.webpart" ZoneId="WebPartContext" Group="Hoozin - App - MyApp" /> <WebPart Title="SubNav" File="WebParts\SubNav.webpart" ZoneId="WebPartSubNav" Group="Hoozin - App - MyApp" /> </WebPartPage>

<HomeUrl>hoozinApps/MyApp/Home.aspx</HomeUrl>


5. Display hoozin form

Thanks to hoozin less and bootstrap lib (see part IV.g), it’s easy to display a form. Add following code in home.xslt.

Here the result:

<fieldset class="hoozinFielset"> <table class="legendDiv"> <tr> <td class="roundNumber"> 1 </td> <td class="title"> First section <span class="titleDesc"> First section description </span> </td> </tr> </table> <div class="inputBlock"> <div class="labelWrapper"> <label for="first-field">First label</label> </div> <div class="inputWrapper">

<input type="text" title="a tooltip" id=" first-field " name=" first-field " class="hoozinInputText hoozinTooltip " placeholder="placeholder"/>

</div> <div class="clear"></div> </div> </fieldset>


6. Use entities

There are four steps to use entities: 1. Posting in an entity stream (hoozin.HeaderPostZone methods) 1.1 - Associate post to entity To associate a post to an entity, use this hoozin.HeaderPostZone JS object public method: entityId is the unique identifier of entity instance.

entityName is the name of entity to use. Sample where JS var 'entitytId' already set to the correct Id: 1.2 - Add extra information to entity post To associate extended custom properties to an entity, use this hoozin.HeaderPostZone JS object public method: Note: This json object must be serializable. Sample:

setEntity(entityId, entityName)

// Associate entity hoozin.HeaderPostZone.setEntity(EntityId, 'EntityName'); // The next posts will be associated to 'EntityName' entity with Id = EntityId

setPostExtendedProperties(json)

// Filter post zone hoozin.HeaderPostZone.setEntity(‘EntityID’, ‘EntityName’); // Associate entity extended cutom properties var now = new Date(); var dueDate = now.setDate(now.getDate() + 5); hoozin.HeaderPostZone.setPostExtendedProperties ( { ‘idObject’: SharePointListItemID, ‘guidObject: SharePointListItemUniqueID, 'Index': 3, 'Description': 'Bug in welcome page.', 'Category': 'UI', 'DueDate': dueDate } );


1.3 - Reset postbox

To reset any JS Postbox object entity association, use this hoozin.HeaderPostZone JS object public methods: Note: removeEntity() already calls removePostExtendedProperties () 2. Registering entity 2.1 - XML definition Entities are defined in the “MyApp.xml” described in section II.b. Insert a new node in the “App” node.

For each entity, add a new Entity node in Entities node of your app XML definition. XML nodes description:

Name: This is the name used in hoozin.HeaderPostZone.setEntity() method.

Description: Free custom description.

StreamIcon: URL of the triangle stream icon of each post associated to entity.

StreamIconTooltip: Tooltip of the triangle stream icon of each post associated to entity.

DisplayUrl: Triangle stream icon <a /> link of each post associated to entity.

XsltPath: Optional. If set, XSLT template is used for custom rendering as describe in (3). 2.2 - Available macros Two types of macros can be used in entity XML definitions. The macros can be used together and inserted in text like in sample XML (2.1) Resources:

hoozin.HeaderPostZone.removeEntity() hoozin.HeaderPostZone.removePostExtendedProperties()

<Entities> <Entity> <Name>EntityName</Name> <Description>Entity Description</Description> <StreamIcon>/_layouts/images/Prexens/Hoozin/Apps/Helpdesk/Stream/issue-identifier.png</StreamIcon> <StreamIconTooltip>{Resource:Prexens.Hoozin.Apps.Helpdesk, XML_EntityIssueDetailStreamIconToolTip} #{EntityProperties:IssueId}</StreamIconTooltip> <DisplayUrl>HoozinApps/Helpdesk/IssueDetail.aspx?AppId=1E2A5BE1-F1A9-4899-9484-7FB74C2D9219&idObject={EntityProperties:ObjectId}&guidObject={EntityProperties:ObjectUniqueId} </DisplayUrl> <XsltPath>TEMPLATE\LAYOUTS\Prexens\Hoozin\TransformationTemplates\Apps\Helpdesk\issue-post.xslt</XsltPath> </Entity> </Entities>


{Resource:<resource file>, <resource key>} Ex: {Resource:Prexens.Hoozin.Apps.Helpdesk, XML_EntityIssueDetailStreamIconToolTip} Entity properties: (Set in (1.2)) {EntityProperties:<entity extended property key>} Ex: {EntityProperties:Description} 3. Custom entity post rendering If XsltPath property is set in XML definition (2.1), the post rendering will be customize. 3.1 - XSLT template requirements To customize the post rendering, the XSL template must be named 'Content'. And the following template parameters must be declared.

3.2 - Customize default rendering or full rendering customization The default rendering XSL template 'StandardPostContent' can be called inside your custom template. This following sample displays the default post rendering.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:pxs="http://xml.prexens.com/" xmlns:rs="urn:schemas-microsoft-com:rowset" xmlns:z="#RowsetSchema"> <xsl:output indent="no" method="html"/> <xsl:template name="Content"> <xsl:param name="current-user" /> <xsl:param name="plugins" /> <xsl:param name="static-object-id" /> <xsl:param name="post-node" /> <xsl:param name="extended-properties-dataset" /> <xsl:param name="entity-extended-properties" /> <xsl:call-template name="StandardPostContent"> <xsl:with-param name="current-user" select="$current-user" /> <xsl:with-param name="plugins" select="$plugins" /> <xsl:with-param name="static-object-id" select="$static-object-id" /> </xsl:call-template> </xsl:template> </xsl:stylesheet>

<xsl:template name="Content"> <xsl:param name="current-user" /> <xsl:param name="plugins" />

<xsl:param name="static-object-id" /> <xsl:param name="post-node" /> <xsl:param name="extended-properties-dataset" /> </xsl:template>


4. Set and remove stream filters in an entity stream (UI methods) When in an entity stream, new pending posts and show more on scroll features are based on stream filters parameters.

- To set entity filter, use hoozin.UI.setFilter('EntityId', <entity Id>) This should be used in custom entity screens associated to a stream.

- To remove filter, use hoozin.UI.removeFilter('EntityId')

This can be used on data-filter attribute of hoozin links of app navigation. <a id="streamViewLink" class="hoozinLink changeLinkState" data-filter="hoozin.UI.removeFilter('EntityId');" >


Annex 1 - Project template


Annex 2 – Create new hoozin user Currently, when user is created in back office section, an error occurs. Despite the error, the user is created but we can’t modify the password on hoozin interface. In order to reset the password, we must use ADSIEdit. To connect to ADLDS, look at information contained in the SharePoint Central Administration, Application Management, Manage Service Applications, hoozin factory Service Application and look at ADLDS settings. So here the procedure:

1. Open ADSI Edit and right click on the element, settings;

2. In connection Point section, check "Select or type distinguish name or naming context" and enter Directory partition of ADLDS Settings.

3. In Computer section, check "select or type or domain or server..." and enter:

Directory host name:Directory host port of ADLDS Settings.

4. In advanced settings, choose "credentials" and enter the “Directory admin username” as username and its password described in ADLDS Settings too.

5. When you are connected, navigate in folders and find "Hoozin/users" folder. On the users list

screen, it’s possible to reset password right clicking and choosing reset password. Now, the user has his password and he can connect to hoozin.

Annex 3 – Good practices During development, it’s important to keep in mind that hoozin core code can evolve all the time. This annex gives you some advises to create a dynamic and flexible code.

JavaScript tips:

Please develop JavaScript object as soon as possible. Into development core department, when our JavaScript exceed 5 functions

XSLT variable declaration: The XML manipulated by the XSLT can changed, for avoid changing all code of the page, it’s important to declare once variables in the top of page.

JavaScript tips: In JavaScript, we always use on() and off() binding and never live(). On the one hand because live() is deprecated and in on the other because on() is more performant, here the source: http://www.jquery4u.com/jquery-functions/on-vs-live-review/

<xsl:template match="/Hoozin"> <xsl:variable name="current-user-sid" select="pxs:GetCurrentUserHoozinSid()" /> <xsl:variable name="profiles" select="Profiles/Profile" /> <xsl:variable name="total-count" select="Profiles/@TotalCount" /> <xsl:variable name="count-profiles" select="count($profiles)" /> …

//script: $('#parentDiv)

.off('click', '#childDiv) .on('click', '#childDiv', function() { }  <div id="parentDiv" > <input type="button" id="childDiv" value="Create" /> </div>