Angular JS and Bootstrap to Display SharePoint 2013 List Data using Script Editor

3. March 2015 06:58 by Rashid Aziz in Sharepoint blogs  //  Tags: ,   //   Comments
I am big fan of using OOTB stuff, but sometime customer want to see things in different way or their organisational design guidelines are difficult to achieve using OOTB functionality. In my previous post I have explained how to customise SharePoint list form using Angular JS and Bootstrap  Here, I will show you how to display list items using bootstrap and AngularJS.  I have picked a scenario: I have SharePoint 2013 list called “Customer Details”. The list have following columns Schema name Display name Title Customer name City City Country Country ContactPerson Contact person   The list default OOTB view appear as below The customer want to display this list data on a page but with complex UI design. OOTB list web part will only display the data in same way as it appears in the list view. One way to achieve the complex design is by using AngularJS and Bootstrap. 1.  Create a new page inside SharePoint 2013 site “Pages” library.  2.  Add a “Script Editor” web part on the page 3.  Copy and paste the following code inside script editor web part <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> var angApp = angular.module('SharePointAngApp', []); angApp.controller('spCustomerController', function ($scope, $http) { $http({ method: 'GET', url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Customer Details')/items?$select=Title,City,Country,ContactPerson", headers: { "Accept": "application/json;odata=verbose" } }).success(function (customerData, status, headers, config) { $scope.customers = customerData.d.results; }).error(function (customerData, status, headers, config) { }); }); </script> <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <div ng-app="SharePointAngApp"> <div ng-controller="spCustomerController"> <br/> <table class="table table-striped table-hover"> <tr> <th>Customer name</th> <th>City</th> <th>Country</th> <th>Contact person</th> </tr> <tr ng-repeat="customer in customers"> <td>{{customer.Title}}</td> <td>{{customer.City}}</td> <td>{{customer.Country}}</td> <td>{{customer.ContactPerson}}</td> </tr> </table> </div> </div> Now, the list data will appear as below inside script editor web part.

SharePoint 2013 Custom List Form using Angular JS and Bootstrap

3. March 2015 06:31 by Rashid Aziz in Sharepoint blogs  //  Tags: ,   //   Comments
According to  Microsoft InfoPath Forms Services for SharePoint Server 2013 will be supported until April 2023. Keeping that in mind I have started looking into alternatives to build rich form which can be used with SharePoint list and replace OOTB form. I have started looking into Angular JS (AngularJS is a JavaScript framework. AngularJS extends HTML attributes with directives and binds data to HTML with expressions). From user interface point of view I spend some time with bootstrap (Bootstrap makes front-end web development faster and easier). In the below example, I will use both AngularJS and Bootstrap to build custom SharePoint 2013 form to create new list items. For this demo purpose, I will use SharePoint page with “Script Editor” to build this form. I highly recommend to use visual studio to build .aspx and .js files and update list schema to change lists default New/Edit forms. 1.Create “Customer Details” list which have the following column Schema name Display name Title First name LastName Last name Address Address   2.     Now create a new page in SharePoint 2013 “Pages” library.    3.     Add “Script Editor” web part on the page.   4.     Copy and paste the following code inside script editor <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <script> function mainController($scope) { $scope.customer = { firstName: "", lastName: "", location: "" }; $scope.createContact = function ($event) { var c = $scope.customer; $event.preventDefault(); var clientContext = new SP.ClientContext.get_current(); var web = clientContext.get_web(); var list = web.get_lists().getByTitle('Customer Details'); var customerListItemInfo = new SP.ListItemCreationInformation(); var listItem = list.addItem(customerListItemInfo); listItem.set_item('Title', c.firstName); listItem.set_item('LastName', c.lastName); listItem.set_item('Address', c.address); listItem.update(); clientContext.executeQueryAsync( Function.createDelegate(this, onQuerySucceeded), Function.createDelegate(this, onQueryFailed) ); }; onQuerySucceeded = function () { alert('Successfully created new customer record'); } onQueryFailed = function (sender, args) { alert('Failed: ' + args.get_stackTrace()); } } </script> <h2>Customer Information:</h2> <br /> <div ng-app=""> <div ng-controller="mainController"> First name <input type="text" ng-model="customer.firstName" /><br /> <br /> Last name <input type="text" ng-model="customer.lastName" /><br /> <br /> Address <input type="text" ng-model="customer.address" /><br /> <br /> <input type="submit" value="Save" ng-click="createContact($event)" /> </div> </div>   5.     Save the page and publish it. The form will look something like this. You can now go ahead and start using the form to create new customer records, but I like to make the user interface a little better. To do that, I have added bootstrap css library reference and added some classes with html elements. <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <script> function mainController($scope) { $scope.customer = { firstName: "", lastName: "", location: "" }; $scope.createContact = function ($event) { var c = $scope.customer; $event.preventDefault(); var clientContext = new SP.ClientContext.get_current(); var web = clientContext.get_web(); var list = web.get_lists().getByTitle('Customer Details'); var customerListItemInfo = new SP.ListItemCreationInformation(); var listItem = list.addItem(customerListItemInfo); listItem.set_item('Title', c.firstName); listItem.set_item('LastName', c.lastName); listItem.set_item('Address', c.address); listItem.update(); clientContext.executeQueryAsync( Function.createDelegate(this, onQuerySucceeded), Function.createDelegate(this, onQueryFailed) ); }; onQuerySucceeded = function () { alert('Successfully created new customer record'); } onQueryFailed = function (sender, args) { alert('Failed: ' + args.get_stackTrace()); } } </script> <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <h2>Customer Information:</h2> <br /> <div ng-app=""> <div ng-controller="mainController" class="col-xs-5 selectContainer form-group"> First name <input type="text" ng-model="customer.firstName" class="form-control"/><br /> <br /> Last name <input type="text" ng-model="customer.lastName" class="form-control" /><br /> <br /> Address <input type="text" ng-model="customer.address" class="form-control" /><br /> <br /> <input type="submit" value="Save" ng-click="createContact($event)" class="btn btn-primary btn-lg active" /> </div> </div> You can see the difference as it look more professional after adding couple of bootstrap css classes.   I hope the above demonstration is helpful.   

Custom rich text editor styles for Content editor web part

3. May 2012 03:51 by Rashid Aziz in   //  Tags: , ,   //   Comments
  I received a request from business to restrict site editor not to use OOTB fonts and styles while they edit the contents of “Content editor web part” in SharePoint 2010. This is nice to have if you want consistent look and feel across the site without much end end-user training.  They asked me to create custom styles; apart from those styles the editor should not be able to apply any font, colours or styles on CEWP contents. I have done these changes on “Page Layout”. If an editor creates any page using that page layout, he/she will only see custom styles while editing the “content editor web part” contents. Below are the detailed steps to achieve this kind of functionality 1. Create custom CSS file (In my case I will call it “CustomRTStyles.css”) with custom styles , also hides OOTB fonts and mark-up styles options and upload it to “/Style Library/en-us/Core Styles/ CustomRTStyles.css” (Change the below CustomRTStyles.css style sheet according to your requirement) /* Custom rich text editor Styles list */ .custom-rteStyle-Heading1 {-ms-name:"Heading 1";  color:#FF0000;  font-size:30px;  font-family:"Gill Sans MT";  font-weight:bold;} .custom-rteStyle-Heading2 {-ms-name:"Heading 2";  color:#000000;  font-size:24px;  font-family:"Gill Sans MT";  font-weight:bold;} .custom-rteStyle-Heading3 {-ms-name:"Heading 3";  color:#000000;  font-size:20px;  font-family:"Gill Sans MT";  font-weight:bold;} .custom-rteStyle-Heading4 {-ms-name:"Heading 4";  color:#000000;  font-size:18px;  font-family:"Gill Sans MT";  font-weight:bold;} .custom-rteStyle-Paragraph {-ms-name:"Paragraph";  color:#969393;  font-size:14px;  font-family:"Arial, Helvetica, sans-serif" } .custom-rteStyle-IntroParagraph {-ms-name:"Intro Paragraph";  color:#000000;  font-size:12px;  font-family:"Arial, Helvetica, sans-serif"} /* To hide fonts tab */ #Ribbon\.EditingTools\.CPEditTab\.Font {  display:none;}  /* To hide Markup styles tab */ #Ribbon\.EditingTools\.CPEditTab\.Markup {display:none;} 2. Open the default master page in SharePoint 2010 designer and add the reference to newly created CSS style-sheet.  // <link rel="stylesheet" type="text/css" href=" /Style%20Library/en-us/Core%20Styles/CustomRTStyles.css" /> Now save and publish the master page. 3. Open the page layout in SharePoint designer on which you what to apply custom editing styles. 4. Locate the RichHtmlField and add the following properties PrefixStyleSheet="custom-rte" AllowFonts="false" The < RichHtmlField > control with look like the following // <PublishingWebControls:RichHtmlField FieldName="PublishingPageContent"  HasInitialFocus="True" PrefixStyleSheet="custom-rte" AllowFonts="false" MinimumEditHeight="400px" runat="server"/> Reference custom css inside page layout just before the <PublishingWebControls:EditModePanel> control  // <SharePointWebControls:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/CustomRTStyles.css %>" runat="server"/> 5. Now add the jquery to force the “Content editor web part” to use custom styles while editing any contents.  Locate the <PublishingWebControls:EditModePanel runat="server"> and add the scripting inside it, the end result will look like following <PublishingWebControls:EditModePanel runat="server"> <!-- Styles for edit mode only--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> ExecuteOrDelayUntilScriptLoaded(function() {  // window.setTimeout(function() {  $("div[RteRedirect]").each(function() { var id = $(this).attr("RteRedirect"), editSettings = $("#" + id); if(editSettings.length > 0 && editSettings[0].PrefixStyleSheet != 'custom-rte') { editSettings[0]['PrefixStyleSheet'] = 'custom-rte'; editSettings[0]['StyleSheet'] = '\u002fStyle Library\u002fen-US \u002fCore Styles\u002fCustomRTStyles.css';  RTE.Canvas.fixRegion(id, false);  }  }); // }, 2000); }, "sp.ribbon.js"); </script> </PublishingWebControls:EditModePanel> 6. Save and publish the page layout. 7. Now create new page in SharePoint 2010 page library by using updated page layout and add “Content editor web part”. The rich text editing tool will look different. I have attached the before and after images to give you guys feelings how the end results would look like.   Before changes   After changes

SharePoint 2010 rich text editing tool styles

I came across a scenario where my client wants SharePoint extranet site contents look and feel consistent. The site have many sub sites and which lot of publishing pages, editors can create pages, add content editor web part and add contents. The request routed to me about deleting some custom styles from content editing tool and adding some new ones. Solution Open the current “Master” page in SharePoint 2010 designer. Click “Style” tab from designer menu and select “Manage styles” Right click any CSS style from” Manager Style” list  and select “Go to code” The core CSS file has all styling references ; the style starts with name “.ms-rteStyle”. Create new styles as .ms-rteStyle-stylename {-ms-name:"Eblogin Style"; color:#00adee;} Save the Core.css file Note: YOU CAN ALSO DELETE THE EXISTING STYLES BEFORE SAVING THE CSS FILE Open the SharePoint site and go to a page which has content editor web part. Edit any content inside the content editor web part and try to select the style from editing tool. You will see new style as shown below

How to display list data in SharePoint 2010 chart web part

In this exercise I will show you how to use the Chart Web Part to provide a simple way to provide charts on a Web Part page so that users can visualize data in native lists within a SharePoint site as well as external lists created with the BCS, I have create a simple list for chart data, but keep in mind that you can use data from backend systems like using BCS external content types. I have created a list called “Sales list” which has two main columns, “Country” and “Revenue” with some data in it, as shown in below image. The Chart Web Part is part of the Enterprise Edition of SharePoint Server 2010. Therefore, you must activate an enterprise feature on your site collection before using chart web part. Activate Enterprise Features Go to Site Actions > Site Settings Select “Site collection features” under “Site collection Administration” section Activate feature called “SharePoint Server Enterprise Site Collection features” Navigate back to the Site setting page Select “Manage site features” under “Site action” section Activate the feature called “SharePoint Server Enterprise Site features”. Activation of these features makes the Chart Web Part available to use. Adding and configuring Chart Web Part Go to site home page or where you want to add web part. Select “site action” > edit page Click on “Add a web part” Select the “Chart Web Part” from the “Business Data” folder and click the Add button place I ton the page. Once the Chart Web Part has been added to the page, you should see a link with the caption of Data & Appearance. Click on the link which will launch a wizard and will allow you to select a data source. On the first page of the wizard, click the link “Connect chart to data”. Now select a data source. Choose “Connect to a List” and click “Next”. On the next page it ask you to choose a source list, in my case it will “Sales list” Next page will show you the data from list just click “Next” In the final wizard Page it will ask to bind your chart with the select, You need to select X and Y filed from the list, In my case Y Field:  Revenue X Field: Country After you bind list column with chart click “Finish” You will see the basic chart as shown below.     Note: If you want to change chart type (e.g. pie chart, lines chart), on the first page of the wizard click “Customize Your Chart” and select your shape and click “Finish”. J I have customized chart type to pie later as shown below.     

Change site actions menu text in SharePoint

7. March 2011 05:57 by Rashid Aziz in Sharepoint blogs  //  Tags: ,   //   Comments
The “Site actions” text is set by the “text” property of SharePoint:SiteActions control in master page. The text property is not editable, it is read only. I have done this in a different way. Here is the alternative solution. You need to create an image which includes the text you want to show instead of actions menu. Open master page in SharePoint designer. Select “Manage styles” pane at the right hand, if you don’t see it then  click “task pane” and go to “manage styles” from menu bar od SharePoint designer. Select “.ms-siteaction,.ms-siteaction a” , double click to open core.css which only applys to current site. Add  the following code to the tab. Font:0px; Background-image <url of your image with text> Text-decoration: none; width: 50px; height: 20px; The width and height could be change according to your requirement. Now save the changes in core.css and go back to your user interface of your site, the text will be replaced by the text you defined in the image.

SharePoint 2010 custom actions page inside Modal Dialog

2. March 2011 06:19 by Rashid Aziz in Sharepoint blogs  //  Tags: ,   //   Comments
If you have a custom action under SharePoint 2010 “welcome menu” or under "site actions menu” and when you click on the custom action you want to open the application page in standard SharePoint modal dialog. Here is the solution, You need to change the UrlAction code in the element file as given below <?xml version="1.0" encoding="utf-8"?>  <Elements xmlns="http://schemas.microsoft.com/sharepoint/">    <CustomAction          Id ="CustomMenu_MoreInformation"         GroupId="PersonalActions"         Location="Microsoft.SharePoint.StandardMenu"         Sequence="1000"         Title="More Information"         Description="View more information"           ImageUrl="_layouts/ebloginImages/logo.png">     <UrlAction Url="javascript:OpenPopUpPageWithTitle('{SiteUrl}/SitePages/MoreInformatin.aspx, RefreshOnDialogClose, 600, 400,'My Custom Action')"/>   </CustomAction> </Elements> Now when you click on the menu option, your application page will open in modal dialog as shown in below pictures.                                                                                    

Hide Quick launch section in SharePoint 2010

28. February 2011 13:47 by Rashid Aziz in Sharepoint blogs  //  Tags: ,   //   Comments
If you don’t want to change show the quick launch section on few pages or sites (i.e Team Site), you need to do a trick with content editor web part, so let’s start. 1.   Add a content editor web part, doesn’t matter where you add it. (Located under “Media and Content” web part categories).  2.   Select the web part and click “Edit HTML source” from ribbon under the format text tool. 3.   In the HTML source add the following code and click “OK”  <style> #s4-leftpanel{ display:none } .s4-ca{ margin-left:0px } </style> 4.   Save the page. The “quick launch” section should not be visible now as you can see the below pictures. 5.   Now to hide the content editor web part, from the web part properties check the hidden property checkbox.  6.   This trick works on any SharePoint 2010 or Foundation site or pages.       

Customise SharePoint 2010 "Site actions" menu

27. February 2011 08:59 by Rashid Aziz in Sharepoint blogs  //  Tags: ,   //   Comments
The Site Actions menu is available on every page inside of SharePoint Foundation. You can add an additional item to this menu using the following custom action. Let’s start J 1. Create an empty SharePoint project in visual studio 2010 2. Now Double-click Feature1 under feature section of project and update the properties, make sure you change the scope to “Web Application“ 3. Now you need to create an element to attach to your feature, to do that right-click on the project and add a new item, then choose “Empty Element“. Give it a proper name. Now edit your element file to reflect what you needed (The additional menu item on the site action drop down menu), here is a sample code to create a “Custom Settings” link which goes to a page in SharePoint called “/SitePages/CustomSettings.aspx” <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/">   <CustomAction Id="SiteActionsToolbar"      GroupId="SiteActions"      Location="Microsoft.SharePoint.StandardMenu"      Sequence="1000"      Title="Custom Settings"      Description="Custom site settings"      ImageUrl="_layouts/ebloginImages/logo.png">     <UrlAction Url="/SitePages/CustomSettings.aspx"/>   </CustomAction> </Elements>  4. Once you edit the element file, all you need to do now is to package it. Right click on the Project or on the Menu bar Choose Build->Package. 5. Copy your packaged file (.wsp) to SharePoint server and install it using stsadm or PowerShell. Your site action menu will have a new option as shown in below picture.                                  

Edit welcome drop-down menu in SharePoint 2010

26. February 2011 17:58 by Rashid Aziz in Sharepoint blogs  //  Tags: ,   //   Comments
If you want to extend the welcome menu on SharePoint (the one that states your name on the top right corner and drops down options like “My Settings”, and “Sign Out”). I will show you step by step on how to do that in SharePoint Foundation 2010, this also works in older versions of SharePoint. So let’s start. 1. Create an Empty SharePoint Project  Create an empty SharePoint project in visual studio 2010  2. Updating the Solution Feature  Now Double-click Feature1 under feature section of project and update the properties, make sure you change the scope to “Web Application“.  3. Create an Element   Now you need to create an element to attach to your feature, to do that right-click on the project and add a new item, then choose “Empty Element“. Give it a proper name. Now edit your element file to reflect what you needed (The additional menu item on the drop down menu), here is a sample code to create a “More Information” link which goes to a page in SharePoint called “/SitePages/MoreInformation.aspx” <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/">   <CustomAction         Id ="CustomMenu_MoreInformation"         GroupId="PersonalActions"         Location="Microsoft.SharePoint.StandardMenu"         Sequence="1000"         Title="More Information"         Description="View more information"          ImageUrl="_layouts/ebloginImages/logo.png">     <UrlAction Url="/SitePages/MoreInformation.aspx"/>   </CustomAction> </Elements>   4. Package your SharePoint Solution  Once you edit the element file, all you need to do now is to package it. Right click on the Project or on the Menu bar Choose Build->Package.  5. Add and Install your Solution to SharePoint Copy your packaged file (.wsp) to SharePoint server and install it using stsadm or PowerShell.  The “More information” element is added to the welcome page as you can see in the picture.                                                  

Stay connected

SharePoint Links

Month List