Tuesday, December 31, 2013

How to include User Custom Actions and Scriptlink using SharePoint JSOM

This is a very fast article about creating and manage User Custom Action with SharePoint JavaScript Object Model (JSOM).

This article describes how you can include Custom Actions, global JS files "ScriptLink" using ECMAScript code in a very easy way without Visual Studio.

A lot of SharePoint Administrator don't allow to add SharePoint WSP (Farm, Sandbox) solutions or SharePoint Designer "Allow you to add  User Custom Action in Lists" for maintenance and upgrade issues, this JSOM method will avoid the installation of SharePoint solutions and will support your Custom solutions.

PS: This requires a good management of the existing "User Custom Action" of the Site using the objects SP.Web and SP.List.
Please document everything on detail to dont get suprises.

For more information about a Tool to Manage this Custom Actions please access the following link:
SharePoint App Processlynx Custom Action and Ribbon Manager Launch
There is also a free version in the office store:
Free Custom Action and Ribbon Manager

I also would like to share the following articles regarding this topic.
Manage User Custom Actions SharePoint 2013 App and Sandbox - JSOM
http://aaclage.blogspot.ch/2014/01/manage-user-custom-actions-sharepoint.html
PnP Manage User Custom Actions
https://github.com/OfficeDev/PnP/tree/master/Samples/Core.ManageUserCustomAction 
and

Examples of Ribbons Customization in SharePoint 2013

http://aaclage.blogspot.ch/2014/04/examples-of-customization-of-ribbons-in.html

This option avoid install WSP solutions "Farm, Sandbox" using declarative in the elements.xml file.



The SP.UserCustomAction object provide methods to include Custom Actions to support our Client Side solution.
Example of our final output.



This give us also the ability to include Custom Javascript actions that will be executed in all Site Pages, including hive folder Pages.
Example:
Site Settings
Url: "https://[Site]/_layouts/15/settings.aspx".


Add the Support Files

The first thing you should do is include JS files "alert.JS and Jquery*.JS" in Assets Library. This files will support our solution.



Go to a SharePoint Page and include a new Script Editor Web Part

Add a embedded Script Editor Web Part and include the code to add a button that create our User Custom Action.

The Page with the Script will add a new button, this option will create the reference in the header to the new SharePoint Files.

Example ECMAScript code to create CustomAction reference to Jquery.js and alert.js files:









function AddCustomActions() { var clientContext = new SP.ClientContext(); var site = clientContext.get_web(); var UserCustomActions = site.get_userCustomActions(); var newUserCustomAction = UserCustomActions.add(); newUserCustomAction.set_location('ScriptLink'); newUserCustomAction.set_scriptSrc('~SiteCollection/SiteAssets/jquery-1.9.1.js'); newUserCustomAction.set_sequence(9); newUserCustomAction.set_title('Jquery'); newUserCustomAction.set_description('Global Jquery'); newUserCustomAction.update(); newUserCustomAction = UserCustomActions.add(); newUserCustomAction.set_location('ScriptLink'); newUserCustomAction.set_scriptSrc('~SiteCollection/SiteAssets/Alert.js'); newUserCustomAction.set_sequence(10); newUserCustomAction.set_title('New Alert'); newUserCustomAction.set_description('Global Alert'); newUserCustomAction.update(); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } function onQuerySucceeded(sender, args) { alert('New Support files added to Site.\n\nRefresh the page.'); } function onQueryFailed(sender, args) { alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); } AddCustomActions()
After you include the code, execute the button "Add CustomAction" and a confirmation alert will appear and refresh the page.


If you access to your Internet Explorer > Source Code the 2 files will be included and the alert should appear.
PS: Be careful with the order of the JS files.


Get UserCustomActions Properties from Web Object

You can use the same Script Editor Web Part to include a new option to retrive the User CustomActions from the Site.


Example ECMAScript code to return CustomAction reference to SP.Web Object:







function Getproperties() { var clientContext = new SP.ClientContext(); var site = clientContext.get_web(); UserCustomActions = site.get_userCustomActions(); clientContext.load(UserCustomActions); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } function onQuerySucceeded(sender, args) { var listInfo = ''; var listEnumerator = UserCustomActions.getEnumerator(); while (listEnumerator.moveNext()) { var oList = listEnumerator.get_current(); listInfo += 'Location: ' + oList.get_location() + '\n' + 'Description:' + oList.get_description() + '\n'+ 'scriptSrc:' + oList.get_scriptSrc() + '\n'; } alert(listInfo); } function onQueryFailed(sender, args) { alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); } Getproperties()
Example of the output:
If you access to Fiddler you can get the details of the JSON output:



Include new Custom Actions

The same way the other 2 User Custom Actions were created, you can include in the SharePoint Out of the Box Menu new options.

After this code is executed a new option is created "New Site" this option will redirect to new Site Creation Page.


Here is the code example:






function runCode() { var clientContext = new SP.ClientContext(); var site = clientContext.get_web(); var UserCustomActions = site.get_userCustomActions(); var newUserCustomAction = UserCustomActions.add(); newUserCustomAction.set_location('Microsoft.SharePoint.StandardMenu'); newUserCustomAction.set_group('SiteActions'); newUserCustomAction.set_sequence(2000); newUserCustomAction.set_title('New Site'); newUserCustomAction.set_imageUrl('/_layouts/images/myIcon.jpg'); newUserCustomAction.set_description('Menu item added via ECMAScript'); newUserCustomAction.set_url('/_layouts/15/newsbweb.aspx'); newUserCustomAction.update(); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } function onQuerySucceeded(sender, args) { alert('New menu item added to Site Actions menu.\n\nTo view the new menu item, refresh the page.'); } function onQueryFailed(sender, args) { alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); }
If you need to monitor the UserCustomActions you can use REST Call to display the Web Objects, for this example the UserCustomActions options.

Access to UserCustomActions using REST Call 
https:/(Site)/_api/web/UserCustomActions

This rest call retrieves the Feed XML associated with UserCustomActions associated with Web Object.



Here is a solution "SharePoint 2013: Manage User Custom Actions App and Sandbox" about this topic.
for more information about this Tool and new version please access the following link:
SharePoint App Processlynx Custom Action and Ribbon Manager Launch

Support Links:
SP.UserCustomAction object (sp.js)
SP.UserCustomActionCollection.add() Method


Hope you like and happy New Year, :)
Kind regards,
Andre Lage

Monday, October 28, 2013

Create simple custom lookup picker in "Hyperlink or Picture" Column

One frequent request from users is the selection of document/Picture url from field “Hyperlink or Picture”.
It is hard for users to add the url of document/Picture from Lists in Forms Lists.

There are other Column Types that open a window to sharepoint site content to select Url, these columns are associated with Publishing Content Types and  some users don't know how use this (they dont even know this exist). Some cannot activate because of business/company reasons others by version of the SharePoint

To help end users to improve the process and reduce possible errors spend some seconds thinking to myself “The Form can call a modal dialog to a Listview and there we can select the file to fill out the URL field".
This can be achieve with a simple javascript customization that overrides the control “Hyperlink or Picture” adding a button that List the documents/Picture and fill out the Url Field.


This solution uses the Forms “NEW/EDIT” where is created a custom option in the column “Hyperlink or Picture”.
The users can choose a document or image using list Views of SharePoint in a Modal Dialog.

This Customization was made using Jquery and SharePoint Modal Dialog Method to Listview and return the link to automatic fill the “Hyperlink or Picture” Column.
This customization has to be done in the Forms “New/Edit” where the option will appear and in the ListViews where the users should select the Document/Picture.



Bellow is the Design of the information structure to our Solution to select Document and Pictures and return their Url.



Create the Custom List



The first task is to create a Custom List with 2 new Columns with the following names and Type:
  • Image Link “Hyperlink or Picture” - (Picture)
  • Document Link “Hyperlink or Picture” - (Hyperlink)






After the columns are created the List Forms “NEWFrom.aspx/EDITForm.aspx” needs to be customize to call the correct lists where are located the pictures to make the reference.



Insert Customization

Edit the NewForm.aspx and EditForm.aspx and change the openddialog('Destiny Folder View URL','Name of field').
For this example was used 2 Library, Picture Library and Document Library and copy the Views url associated.
  • OpenDialogUrl (Url of the View)
  • field 'Image Link' and 'Document Link'
After the change add a "Script Editor Web Part" and add the code.



<script src="../../SiteAssets/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">


$(document).ready(function() {
$("input[title='Image Link']").parent().append('</br><input type="button" onclick="OpenDialog(\'../../PublishingImages/Forms/Thumbnails.aspx\',\'Image Link\')" value="Select Image"></input><br/>');
$("input[title='Document Link']").parent().append('</br><input type="button" onclick="OpenDialog(\'../../Shared%20Documents/Forms/AllItems.aspx\',\'Document Link\')" value="Select Document"></input><br/>');
});


function OpenDialog(OpenDialog,Field) {
    var options = SP.UI.$create_DialogOptions();
    options.url = OpenDialog;
 this.GlobalField= Field;
    //options.showMaximized = true;
    options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
    SP.UI.ModalDialog.showModalDialog(options);
}

function CloseCallback(result, target) {
    if (result == SP.UI.DialogResult.OK) {
        $("input[title='"+GlobalField+"']").val(target);
    }
    if (result == SP.UI.DialogResult.cancel) {
        // Run Cancel Code
    }
}
</script>

Select Picture



When a user chose the option “Select Image” the modal dialog is shown to a Listview of pictures.
There the user should select the picture to reference using the Checkbox in the Tile.



After the Picture is selected the Modal Dialog is close and the Field “Image Link” will have the Url reference.



Insert Customization

Access to the Picture Library View and edit the Page and add a Script Editor Web Part.



Edit the Script Editor Web Part and add the following code to select the Image in the checkbox of the image.

<script src="../../SiteAssets/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.s4-itm-imgCbx-inner').click(function() {
var id= $(this).parent().parent().parent().parent().children().attr('id').substring(0, $(this).parent().parent().parent().parent().children().attr('id').length - 1)+'7';

var filext = $('#'+id).attr('src').substr($('#'+id).attr('src').lastIndexOf('.'));

var remterm=$('#'+id).attr('src').replace('_w/','').replace(filext,'');

var link = remterm.substr(remterm.lastIndexOf('_')+1);
remterm = remterm.replace('_'+link,'.'+link);
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, remterm);

});
});
</script>

Select Document



When a user chose the option “Select Document” the modal dialog is shown to a Listview of Documents.
There the user should select the Document to reference, using the Checkbox in the Grid.




After select the Document the Modal Dialog will close and the reference will appear in the Field.




Insert Customization

Access to the Document Library View and edit the Page and add a Script Editor Web Part.


Edit the Script Editor Web Part and add the following code to select the Image in the checkbox of the Document.

<script src="../../SiteAssets/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.s4-itm-cbx').click(function() {
var link =$(this).parent().parent().children('.ms-vb-title').children().children().attr('href');

SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, link);

});
});
</script>



After the form is fill out, the View should appear the reference to the Document and Image in the ListView.
This option will be also available in the Edit Form.


Ok, that is all you need to create your custom image/document Url with some Javascript and Modal dialog and Out of the Box Features.




Update for SP2010
After some requests associated to SP2010 here are the jquery lines for the picker from document library and image library.

Document Library Picker:
<script type="text/javascript">
$('.s4-itm-cbx').click(function() {var link =$(this).parent().parent().children('.ms-vb-title').children().children().attr('href');SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, link);});

</script>

Image Library Picker:
<script type="text/javascript">
$('[id*=cbxTB]').click(function() {var newid= this.id.replace('cbx','').toLowerCase();
var filext = $('#'+newid).attr('src').substr($('#'+newid).attr('src').lastIndexOf('.'));
var remterm=$('#'+newid).attr('src').replace('_t/','').replace(filext,'');
var link = remterm.substr(remterm.lastIndexOf('_')+1);
remterm = remterm.replace('_'+link,'.'+link);
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, remterm);

});
</script>



Hope you like this article,
Kind regards

Tuesday, September 10, 2013

Example: Custom UI Style Tiles with Drag and Drop SharePoint 2013


Yep, another App solution with Custom Style, looks like a lot of people like this type of “Tutti Frutti” Look and feel “i am not talking the RTL TV show from the 1990”, so i gave a try with the Out of the Box SharePoint Solutions and create a example on how we can also create our Tiles with Modern UI Style using SharePoint Apps with SharePoint-Hosting and without a lot of code.


After some research in Out of the Box SP Features and 2 hours of code made a simple Tiles solution with Drag and drop and edit option using custom List a support with Jquery and PropertyBags.

This example only show how you can use Lists and Jquery to create a more dynamic Tiles
If the Out of the Box List “Promoted Links” response your requirements, just use it. :)

PS: If you like to develop, can recommend to make some research in the following site http://www.drewgreenwell.com/projects/metrojs, has a very interresting plugin for tiles.

Final result of my custom Solution:


Out of the Box SharePoint Tiles


The best way to start is to understand how SharePoint Out of the Box is using the Tiles in SharePoint, using the List Template “Promoted Links”, here a example.

When you create a SharePoint Site, you are able to see the different options of the Tiles and how behaves.



To create a custom Row of Tile, you can select the option “Site Settings > Add a app > Promoted Links”.


From this List “Promoted Links” you will have a list of options that i include in my custom List to support my App solution to give more option UX and flexibility in the Page .


This option will provide entries where you can define the Out of the Box SharePoint Tiles, that can be use in the SharePoint Page as Web Part.

Here a list of some custom develop and customization about this topic:


Custom UI Style Tiles


This solution was created to response the following requirements:
  • Rearrange Tiles without use access List Views
  • Use List to support Tiles
  • Edit Option in Tiles
  • Define the Colors (Style)
  • Define Hide Tile option
  • Example solution to be shared


This solution build with Visual studio 2012, using the app Template and supported by the Main Folder/Templates

Pages
  • Default.aspx
  • TilesColumns.aspx
Content
  • App.css
  • jquery-ui.css
Scripts
  • app.js
  • jquery-ui.js
Images
  • *.png
List Item Template
  • Tiles
    • Ribbon “TilesColumns”

Insert New Tile

To create a new Tile, should be select the option “Manage Tiles” and should be selected “New Item” as a normal List.

There you will have the same fields as Promoted Links and  some new Fields to support our Solution:
  • Title (Title of the Tile)
  • Background Image Location (Image in Background of the tile)
  • Description (Description of Tile)
  • Link location (where the tile should redirect)
  • Color (Style Colors)
  • Launch Behavior (same page, new page, Modal Dialog)
  • Size (Large or small Tile)
  • Hide (Appear or not in the Home Page)
  • Order (Does not appear and is Managed by the solution)



After this action the Tiles Should appear in the Home Page of our App Solution.

Manage Tiles Columns


The Tiles are Manage by columns, this columns are manage by PropertyBag stored in the Site, to manage the number of Columns was created a new Ribbon option in the List “Manage Tiles”.
To access the Custom List Tiles, should be selected the option “Manage Tiles”.



This Option will redirect you to List View with the supported Ribbons.
To access the new option should be selected the following option “Lists > Manage Tiles Columns”.


A modal Dialog List Pop Ups  and there you are able to manage the Columns that will appear in the Home Tiles Page.


After you select the option new Columns will be created where you can add the Tiles in different positions of the Page.

Edit Titles


This solution also provides the ability to edit the Tiles and is located in the Right side of the Title as “...”.



After this option is selected a Pop up appear associated with the fields associated with the Tile.


Design of the Tile


The following Picture defines the structure of the Tile and the Html associated in the design.


All this option can be accessed as a normal list, to Access this List, should be selected the option “Manage Tiles” in the HomePage.

It was used Visual Studio 2012 to create the Out of the Box Custom List template and associated Fields to response the requirements.



Visual Studio 2012 provides a visual Optio where you can add and Manage the Fields in the List Template.



The effects used in the Tiles was was made using jquery and example “Jquery Portlet example” for the Drag and Drop and up and down of the Tile Description.
Below is the code used to make the efects “not that much”....




The rest of the code is Client Side Call using SharePoint 2013 ECMAScript to mange the Order and the loading of the Tiles html Style.


The solution is shared in the following link Gallery.

Hope you like the Article,

Kind regards,
Andre Lage