terça-feira, Julho 15, 2014

Processlynx Team Organization Chart launch in Office Store

After the launch of the SharePoint App Processlynx Ribbon Manager a new App was launch in Microsoft Office Store call Processlynx Team Organization Chart.

This app allows content managers to create an organization chart to visually display structures of e.g. teams or business units. The organization chart can include contact details of each member, is exportable to e.g. Microsoft Outlook.

The goal of the app is to create a simple Organization chart that try to focus  specific groups/team or projects that is not described in the organization of the company or in the UserProfiles of the company and they want to show who they are. 
This Organization chart app is for presentation purposes.

The App provides a App part where you can add in the SharePoint site to display the Organization Chart, also gives the ability to zoom the chart when a lots of nodes are display in the app Part.

This App is base in SharePoint-Hosted and uses REST and HTML5 to create the Organization chart.

The app "Processlynx Team Organization Chart" can be found in Microsoft Office Store in the following link:
http://office.microsoft.com/en-us/store/processlynx-team-organization-chart-WA104365892.aspx


Here are some screenshoots of the Processlynx Organization Chart App.







Here are some videos of the SharePoint App on how you can manage and configure the App.

This app show how we can configure the nodes and dependencies and include the App Part in the SharePoint Site to present the Organization Chart in the SharePoint Site.




This Video shows how the App interacts with the Look and feel of the SharePoint Site to maintain the integrity in Site as one.


Here a presentation of the "Processlynx Team Organization Chart"


Hope you like this article, 
Kind regards, 
André Lage

segunda-feira, Julho 07, 2014

How to Enable/Disable Ribbon Buttons by User using EnabledScript and REST Code

Hi all, 

This article is again an oldie but a nice one to remember about the Ribbons (since SP 2010) and how we can manage their visibility. I am not saying nothing new because there are a lot of content about this topic on internet that can be used in your solution also this one (there are really good stuff and yes i am lazy...) to include in my business case "Disable Ribbons to specific user using EnabledScript".


This example creates a Custom Ribbon that visibility should be define to a specific user.
The solution uses EnabledScript with REST calls to indentify current user and enable/disable the Ribbon. 

Since i use RibbonManager App interface to create/manage/deletion/recycleBin of Custom Actions and complex XML structure, this give more focus to developers response the real business needs with their code.
There the RibbonManager App is helper to reduce time in a very boring task of XML configuration (some XML take hours...) and if you can do it in 5 minutes your life can be more easy and you become more efficient....   :)
Another thing from the RibbonManager App SharePoint App, don't need Farm or Sandbox deployments, uses the SharePoint App Model to work with Office365 and SharePoint On-premise 2013, this can take out the time to create IQ documents and discussions with IT Managers for approval of your Solution. :)

Here is the final output:





About code related, 
There is a lot of documentation talking about this topic EnabledScript in Ribbons you should read about to support your developmenthere are a small list of articles :
CommandUIHandler Element
http://msdn.microsoft.com/en-us/library/office/ff458385(v=office.15).aspx
Asynchronously Checking if a Command is Available in the SharePoint Ribbon
http://www.andrewconnell.com/blog/Asynchronously-Checking-if-a-Command-is-Available-in-the-SharePoint-Ribbon
Code example for EnabledScript element in Ribbon XML
http://henrikfromsweden.blogspot.ch/2010/11/code-example-for-enabledscript-elemnt.html
Using RefreshCommandUI with the Server Ribbon (Dallas Tester, Fred Mameri)
http://blogs.msdn.com/b/sharepointdev/archive/2011/02/17/using-refreshcommandui-with-the-server-ribbon.aspx
Customizing the ribbon (part 1) – creating tabs, groups and controls
http://www.sharepointnutsandbolts.com/2010/01/customizing-ribbon-part-1-creating-tabs.html
Sample code: Asynchronously checking if a Ribbon command is available
http://blog.mastykarz.nl/sample-code-asynchronously-checking-ribbon-command/
Enable or disable custom ribbon button in SharePoint 2010
http://tomaszrabinski.pl/wordpress/2012/02/25/enable-or-disable-custom-ribbon-button-in-sharepoint-2010/

About the creation of the Custom Ribbon structure was associated the Registration type Document Libraries ID -101 and associate to new Ribbon the Location "Ribbon.Library.Actions"



When the new Ribbon is created the validation Script should added in the field "Enabled" associated to EnabledScript in the XML structure.



Validation Code to Enable/Disable Ribbon Button

This code has to be included in the EnabledScript option of the XML Sctructure associated with the Ribbon described in point "Add Ribbon Custom Action and ScripLink to support solution in SharePoint Site" .

****************Code Example****************
javascript:var name;
//Get Current User Name and send welcome message
getCurrentUser(function(userData){
alert("Welcome back Mr. "+userData);
name=userData;
});
//Get User Name REST call
function getCurrentUser(success)
{$.ajax({    
url:  _spPageContextInfo.webServerRelativeUrl + ((_spPageContextInfo.webServerRelativeUrl.indexOf('/', _spPageContextInfo.webServerRelativeUrl.length - 1) !== -1) ? '' : '/') + "_api/web/currentUser?$select=Title",
method: "GET",
    headers: { "Accept": "application/json; odata=verbose" },    
success: function (data) {success(data.d.Title);},  
async: false,
error: function (error){alert(error.status);}   
});
}
//This validation returns true ="Enable Option" or false="Disable Option"
if (name=='Andre Lage')
{true;}else{false;}


User Validated

Access the Library where the Custom Ribbon was created and should appear Enable.




User not Validated

If you change in the code the following line
"if (name=='Andre Lage')" to "if (name!='Andre Lage')
the next time you access the Library with Custom Ribbon should appear Disable.



Add Ribbon Custom Action and ScripLink to support solution in SharePoint Site

I use the RibbonManager App, to include the Scriplinks and Ribbons in the Host Web Site to became accessible in SharePoint Site (is faster and more efficient to create the interface and Developers should only focus in the business code).
If you like to use Visual Studio and Declarative code you can use the following XML.

For the Custom Ribbon you can include the Custom Ribbon Action with the following XML Structure:

<CommandUIExtension xmlns="http://schemas.microsoft.com/sharepoint/">
<CommandUIDefinitions>
<CommandUIDefinition Location="Ribbon.Library.Actions.Controls._children">
<Button Id="My Custom Button" LabelText="My Custom Button" Image32by32="/_layouts/15/1033/images/formatmap32x32.png?rev=33" Image32by32Left="-168" Image32by32Top="-68" ToolTipTitle="My Custom Button" Command="My Custom Button.Command" TemplateAlias="o1" />
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler Command="My Custom Button.Command" CommandAction="<Add action Code here>" EnabledScript="<Add validation Code here>" />
</CommandUIHandlers>
</CommandUIExtension>

For the Jquery you can use the following XML Structure:
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="Global Jquery" Title="Global Jquery" Description="" Location="ScriptLink"ScriptSrc="~Site/SiteAssets/jquery-1.10.2.min.js" Sequence="1" > </CustomAction>
</Elements>

Here a video with all the steps to create this Action:




Support Links:
CommandUIHandler Element
http://msdn.microsoft.com/en-us/library/office/ff458385(v=office.15).aspx
Asynchronously Checking if a Command is Available in the SharePoint Ribbon

http://www.andrewconnell.com/blog/Asynchronously-Checking-if-a-Command-is-Available-in-the-SharePoint-Ribbon
Code example for EnabledScript element in Ribbon XML
http://henrikfromsweden.blogspot.ch/2010/11/code-example-for-enabledscript-elemnt.html
Using RefreshCommandUI with the Server Ribbon (Dallas Tester, Fred Mameri)
http://blogs.msdn.com/b/sharepointdev/archive/2011/02/17/using-refreshcommandui-with-the-server-ribbon.aspx
Customizing the ribbon (part 1) – creating tabs, groups and controls
http://www.sharepointnutsandbolts.com/2010/01/customizing-ribbon-part-1-creating-tabs.html
Sample code: Asynchronously checking if a Ribbon command is available
http://blog.mastykarz.nl/sample-code-asynchronously-checking-ribbon-command/
Enable or disable custom ribbon button in SharePoint 2010
http://tomaszrabinski.pl/wordpress/2012/02/25/enable-or-disable-custom-ribbon-button-in-sharepoint-2010/

Hope you enjoy the Article, 
Kind regards,
André Lage

domingo, Julho 06, 2014

Create mandatory Form Popup for users when access SharePoint Site using REST

Hi all, 

This is a Sunday afternoon article about SharePoint on how we can create a mandatory form popup when a user opens a SharePoint Site.

The Idea behind is a common task in Business requests, Collect data for some type of reason and use SharePoint Portals for communication and collaboration since all users should use it for their daily work.

Here is the the final output of the Form Popup.



Architecture example for mandatory form popup



How to Configure 

This Solution is base in the following items:

  • SharePoint List "Contacts"
  • Files
    • Jquery.js
    • LoadForm.js
    • CustomForm.aspx
SharePoint List Contacts

Create a Out of the Box SharePoint List from type "Contacts", this list will be used to collect data from users from the Mandatory Form.




Include the Code to Load Mandatory Form Popup

The following code validates if the user fill out the Mandatory Form, if he didn't fill out a popup appears in all SharePoint page except the support page "CustomForm.aspx" where is located the Form Design.
Create a Javascript file call "LoadForm.JS" and include the following code.

****************Code Example****************
var path = window.location.pathname;
var page = path.split("/").pop();
var waitForm;
$(document).ready(function () {
//Validation of the Form Page to dont loop the modal Dialog
 if (page!=="CustomForm.aspx")
{
LoadCustomForm();
}
  });
function GetCurrentWebUrl() {
                return _spPageContextInfo.webServerRelativeUrl + ((_spPageContextInfo.webServerRelativeUrl.indexOf('/', _spPageContextInfo.webServerRelativeUrl.length - 1) !== -1) ? '' : '/');
}
function LoadCustomForm()
{
//Method to validate if user already add any item using REST
//Code from reference "Get list items created by logged in user with REST api"
getCurrentUser(function(userData){
$.ajax({
            url: GetCurrentWebUrl() + "_api/web/lists/GetByTitle('Contacts')/items?$select=Id&$filter=AuthorId eq '"+userData.Id+"'",
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data){
if (data.d.results.length==0)
{
var options = {
title: "Welcome "+userData.Title ,
autoSize: true,
showClose:false,
url: GetCurrentWebUrl()+"SiteAssets/CustomForm.aspx" };
SP.UI.ModalDialog.showModalDialog(options);
}
},
            error: function (error){alert(error.status)}
        });
});
}
//Method to Add item in contact List by REST
function Save(Firstname,lastName){
ShowWaitForm();
var item = {
            "__metadata": { "type": 'SP.Data.ContactsListItem' },
            "FirstName": Firstname,
            "Title": lastName
        };
$.ajax({
            url: GetCurrentWebUrl() + "_api/web/lists/getbytitle('Contacts')/items",
            type: "POST",
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(item),
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            },
            success: function(data) {
CloseWaitForm();
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK);
            },
            error: function (error){alert(error.status);CloseWaitForm();}
        });
}
//Get Current User Info
function getCurrentUser(complete)
{    
$.ajax({
url: GetCurrentWebUrl() + "_api/web/currentUser?$select=Title,id",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
complete(data.d); 
},
  error: function (error){alert(error.status);CloseWaitForm();}
});
}

function ShowWaitForm() {
    if (waitForm == null) {
        waitForm = SP.UI.ModalDialog.showWaitScreenWithNoClose("Processing", "Your request is being processed. Please wait while this process completes.");
    }
}
function CloseWaitForm() {
    if (waitForm != null) {
        waitForm.close(0);
        waitForm = null;
    }
}

CustomForm

A support page was created for the Custom Form "CustomForm.aspxwhere is added the html design and files refences to support the Mandatory Form.



You can see the aspx example in the following Link: http://1drv.ms/1n3JgUZ .


Include Files in Site Assets

After the File "LoadForm.js" and Page "CustomForm.aspx" are created you can include in the support Library "Site Assets" .



Add ScripLink to support Files

I use the  RibbonManager App, to include the Scriplinks in the Host Web Site to became accessible in all SharePoint Pages.
If you like to use Visual Studio and Declarative code you can use the following XML.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="Global Jquery" Title="Global Jquery" Description="" Location="ScriptLink"ScriptSrc="~Site/SiteAssets/jquery-1.10.2.min.js" Sequence="1" > </CustomAction>
</Elements>

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="LoadForm" Title="LoadForm" Description="" Location="ScriptLink"ScriptSrc="~Site/SiteAssets/LoadForm.js" Sequence="2" > </CustomAction>
</Elements>

After this the ScripLinks are included. 
When the users accessed a SharePoint Page the Popup appear with the Mandatory Form.


After the content is created, you can access the List and validate if data is there, after that the Popup will not appear to end user.


Done, made in a very easy way, here a video will all the steps:



Support articles/links:
getCurrentUser Method

Hope you like this article,
Kind regards, 
André Lage

sábado, Julho 05, 2014

Add Custom JS Object Oriented code in SharePoint Site (MDS included) and associate Actions

Hi all, 

Some time ago had a question on how we can create a Custom JS Object code and be available in all SharePoint Site.
The problem of the developer was the fact for every customization was included in pages like webPart or references to JS file or embedded code, with one or 2 pages are ok, but the monster grown up and show their teeths and became unmanageable, now he needs to structure all code in custom JS Object oriented and associate to the correct pages.

Then came SP2013 and MDS after everything became harder again. :)

This example create a possible scenarion where you can add your custom JS Object model, capture the correct page and inject the Business Code for that specific page and also include methods that can be used in Actions like Custom Ribbon Buttons. 

Here the expected output:



Example:
This Solution will try to create a example where i make a simple Custom Javascript Object oriented code in JS file that is call "Company.Core.js". 
The Code validates the URL (with or without MDS) from SharePoint Site and if needed load the correct Script for specifics pages.
For this example was created 2 Ribbon Buttons Actions that make calls to function from the Custom JS Object  "Company.App.SP.Core" included by ScriptLink.
This code will be loaded in all SharePoint Pages even if is MDS activated or not.

Why this approach?
This example helps developers to define Custom JavaScript Object with Business /Customization code for better response the Clients requests.
Provides the center of Management of your code, avoid management of WebParts with Scripts, change MasterPages and avoid possible issues with Migration and Upgrades in Page with custom code also give access to some Backgrounds Pages like "/_layouts/15/viewlsts.aspx" where you can load specific JS Code and  better management of Permissions to Developers "they just need to update the version of Javascript and support Files (css, imgs, js)".
The example also includes a method to call JS code without breaking the Minimal Download Strategy service when the page is loaded.

Architecture of the solution


Support Files to example:
  • Jquery.*.js
  • Company.Core.js (Custom JS Code with Business rules and Code Management) 

Company Core Javascript File

The Core file is key to manage all scripts and associated to specific pages.

Create js file "Company.LoadScript.js" and include the following code.

//Load Method LoadScript() after page is loaded
$(document).ready(function() {LoadScript();});
//If MDS Activated this method capture the haschchange and loads Method LoadMDSScript();
$('body').append('<script>window.onhashchange = locationHashChanged;function locationHashChanged(){LoadMDSScript();}</script>');

function LoadMDSScript(){
//Load Method LoadScript() after DOM OBjects are loaded
$(window).load(function () {
        LoadScript();
});
}
//Call JS Custom Object and get correct URL for possible code validation
function LoadScript(){
var status2 = SP.UI.Status.addStatus("Info:", "<b>Page Url:</b>"+_spPageContextInfo.serverRequestPath+"<br/><b>MDS Url:</b>"+document.location.pathname +document.location.hash);
        SP.UI.Status.setStatusPriColor(status2, 'blue');
Company = {
Version: "1.0.0",
App: {
SP: {
Core: {
GetContentFromObject: function(Title,data) {
alert(Title + " \n"+ data);
}
}
}
}
};
}

Support Code in Page: 
How to Create Global Custom Ribbon using ScriptLink without MDS issues

Include File in Library Site Assets

With the file created drag and drop or Upload file "Company.LoadScript.js" in Site Assets Library in the Hosted SharePoint Site.


This Method Loads JS Object Company.App.SP.Core, from there i can create Methods to support you code, for this example i pick the Url of MDS and without MDS using the Method "_spPageContextInfo.serverRequestPath"  






Add ScripLink to support Files

I use the  RibbonManager App, to include the Scriplinks in the Host Web Site.
If you like to use Visual Studio and Declarative code you can use the following XML.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="Global Jquery" Title="Global Jquery" Description="" Location="ScriptLink"ScriptSrc="~Site/SiteAssets/jquery-1.10.2.min.js" Sequence="1" > </CustomAction>
</Elements>

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="Company.Core" Title="Company.Core" Description="" Location="ScriptLink"ScriptSrc="~Site/SiteAssets/Company.LoadScript.js" Sequence="2" > </CustomAction>
</Elements>


Associate Actions to Company.App.SP.Core functions

For this example was create 2 Ribbons with custom Actions to retreive selected items and the List Id.

For the creation of the Ribbon and Actions i used the RibbonManager App, 
Create a Custom Action "Custom.Ribbon" and associate location "CommandUI.Ribbon", then associate all Document Libraries using ID "101" and include 2 custom Ribbon Controls "Get List Id" and "Get Selected Item ID".



For each Ribbon was selected the Type Button and include the Action associated with Custom JS Method "Company.App.SP.Core.GetContentFromObject(‘Title',‘Value')".


After the Ribbon is created in the RibbonManager SharePoint App, you can return to Host SharePoint Site and access a Document Library, there 2 new options in the Ribbon Tab "Library", when selected return the ID of the List and the ID of the selected Item as shown in the images below.





To put everything together and to show how simple this can be made, this video show all the steps and expected behavior of example.


Hope you like this new article, 
Kind regards, 
André Lage