Friday, August 18, 2017

SharePoint 2013/ Office 365: SharePoint designer workflow fails to assign task to SharePoint group.

I faced the weird issue, that SharePoint designer workflow which we have created to assign task to all the members of the SharePoint group. Which was working fine for some group and suddenly started failing for the newly created SharePoint group.

I spend some time on research , debugged the workflow no luck there, then at last thought to compare the group settings as it works for few. That did a trick and come to know that relation of Group Visibility settings in SharePoint workflow.

If the Group Visibility is set to "Group Members" - Workflow will fail for this group, it will not assign the tasks or other group related operations will fail.

Workflow requires to have Group Visibility set to "Everyone". else it will fail.

I came to know two scenarios where it fails if visibility is not "Everyone"

1. When we assign task to SharePoint Group.
2. When we try to check from workflow that user belongs to particular SharePoint group or not.

I hope this small piece of information will save your time!

SharePoint Online / Office 365 : Steps for Adding Search Result Webpart in Pagelayout


Recently, while working on a SharePoint online project I faced the requirement to add the Configured Search result webpart in PageLayout. Which should show the result based on the one of other taxonomy field on the page.

Steps to include the Search Result Webpart in Pagelayout:

1.Create one page and configure the Search Result Webpart there. (Tip: Create the separate result source, so no dependency on changing the query later in pagelayout if any modification.)

2. Export the webpart, open the exported file in any editor. Which will look something like below image. We will require all these property value to configure the webpart in layout.


3.  Create the page layout and set up the basic design.
4.  Register the following assembly at the top of your Pagelayout.
<%@ Register Tagprefix="SearchWebControls" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
 5. Now find the desire <ZoneTemplate>  where there is requirement to add the search webpart and add the following piece of code inside that. change the property value from the export file of configured search result webpart.

<SearchWebControls:ResultScriptWebPart runat="server" DataProviderJSON=" {'QueryGroupName':'Default','QueryPropertiesTemplateUrl':'sitesearch://webroot <Copy the property value from exported webpart>}" BypassResultTypes="<Copy the property value from exported webpart>" ItemTemplateId="<Copy the property value from exported webpart>" ItemBodyTemplateId="<Copy the property value from exported webpart>" ResultTypeId="<Copy the property value from exported webpart>" SelectedPropertiesJson="<Copy the property value from exported webpart>" HitHighlightedPropertiesJson="<Copy the property value from exported webpart>" AvailableSortsJson="<Copy the property value from exported webpart>" ShowLanguageOptions="<Copy the property value from exported webpart>" ShowPaging="<Copy the property value from exported webpart>" ShowBestBets="<Copy the property value from exported webpart>" ShowPersonalFavorites="<Copy the property value from exported webpart>" ShowDidYouMean="<Copy the property value from exported webpart>" ShowAdvancedLink="<Copy the property value from exported webpart>" ShowPreferencesLink="<Copy the property value from exported webpart>" ShowResultCount="<Copy the property value from exported webpart>" ShowResults="<Copy the property value from exported webpart>" PreloadedItemTemplateIdsJson="<Copy the property value from exported webpart>" ShowAlertMe="<Copy the property value from exported webpart>" QueryGroupName="<Copy the property value from exported webpart>" RenderTemplateId="<Copy the property value from exported webpart>" StatesJson="{}" ServerIncludeScriptsJson="" Title="Tools" Description="Displays the search results and the properties associated with them." AllowRemove="" AllowZoneChange="True" AllowMinimize="False" AllowConnect="True" AllowEdit="False" AllowHide="True" ChromeType="TitleOnly" ChromeState="Normal" HelpMode="Modeless" WebPart="true" ></SearchWebControls:ResultScriptWebPart>

You can add the other properties value like above from the exported webpart.

6. Save and publish the pagelayout. based on your result source/query it will start showing the result when you create new page using this pagelayout.


Happy Coding!

Monday, January 30, 2017

Step by Step SharePoint Framework setup with Angular2



I started trying the new SharePoint Framework (SPFx), which looks quite promising.
let’s start to setting up a SPFx project that uses Angular 2.

Prerequisites to configure/setup the development machine : link

Step 1: In cmd, Navigate to the directory where we want to create our project.

Step 2: Run the command "yo @microsoft/sharepoint"


Step 3: Now we need to follow the instruction given in SharePoint Client-side Solution Generator 



Step 4: Here at this stage we need to select the JS framework. there is possibility to select the out of the box framework supported. however to use the Angular 2 as our JS Framework we need to select the "No javaScript web framework"


Step 5: Now installation and configuration will start, it will take sometime to complete. Once that done, will get the success message.


Step 6: Now to start the local web server, run this command: gulp serve


Step 7: At this point it browser, use the (+) sign to add the webpart created. Here we named it "HelloWorld.


Step 8: At this stage now we need to install the Angular2 using npm package manager. for that need to open our SPFx project in code editor. here we are going to use the visual studio code. It will looks something like below image.


Step 9: Open the package.json and add the angular dependency.


Step 10: Open cmd and run the "npm install" command.

Step 11: Once installation is done, go back to project and create new folder called "app" and inside that folder create two files "app.module.ts" and "app.component.ts" now structure will look like below.


Step 12:  We are going to display sample text box with label on our webpart, for that add the below code in app.component.ts and app.module.ts




Step 13: Open the HelloWorldWebPart.ts file, here we need to make few changes in render method to display our content.


Step 14: Now finally we are done. last step to open the cmd and run the command "gulp serve".


Step 15: Output will looks like below:

You can find the complete code here: SPFxAngular2 



Happy Coding!