Filter N-N Add existing Look Up Contact Custom View CRM 2015

I had a requirement to add contacts where the [Account Type] is “Lawyer” to entity “Case”.  I created a relationship N:N between contacts and cases.

Unfortunately the filter for N-N Add Existing button on a sub grid stopped working on from version CRM 2013. It does not work on CRM 2015 on Premises as well.

I stumbled upon the blog Filter N:N Add Existing Lookup Dynamics CRM 2013 how to resolve the issue using the CRM function LookupObjectsWithCallback.

I created a view in the contacts list named “Lawyers” and noted down the view ID. To find the view Id, open the CRM solution which has the entity, expand entities and “contact”, select the view “Lawyers”.  Click on Arrow down next to Actions and select “Copy a Link”.FindCustomViewId The URL is in the following format.

<[CRM server]/[Organisation]/tools/vieweditor/viewManager.aspx?appSolutionId=%7bFD140AAF-4DF4-11DD-BD17-0019B9312238%7d&id=%7b5F90BBF5-4409-E511-80CF-00155D580900%7d>

Decode the url encoded id parameter into a valid GUID.

{5F90BBF5-4409-E511-80CF-00155D580900}

I created a .js file on the file system and examined the different parameters the method “LookupObjectsWithCallback” accepts and reconstructed the method so as the pop up dialog

  1. Allows selection of contact(s) from  only  Lawyers view
  2. Hides the New Button
  3. Hides other contact views
  4. Allows search of  contacts from  only  Lawyers view

The method “LookupObjectsWithCallback” can accept up to 25 parameters which are optional and position of the relevant parameter needs to be determined to update behaviour of dialog to select contact.


//filters an add existing lookup view (N:N)
function addExistingFromSubGridCustom(gridTypeCode, gridControl, context) {
var viewId = "{5F90BBF5-4409-E511-80CF-00155D580900}";//Lawyers
var relName = gridControl.GetParameter("relName");
var roleOrd = gridControl.GetParameter("roleOrd");
/*
LookupObjectsWithCallback(callbackReference,
lookupField,
lookupStyle, // "single" or "multi"
lookupTypes,
lookupBrowse,
bindingColumns,
additionalParams,
showNew, // "0" or "1"
showProp,
bPopulateLookup,
defaultType
searchString,
dataProviderOverride,
defaultViewId,
customViews,
filterRelationshipId,
rId,
rType,
rDependAttr,
allowFilterOff,
disableQuickFind,
disableViewPicker,
viewsIds,
additionalFetchFilter,
additionalFetchFilterTypes
);
*/
//pops the lookup window with our view injected
var parent = GetParentObject(null, 0);
var parameters = [gridTypeCode, "", relName, roleOrd, parent];
var callbackRef = Mscrm.Utilities.createCallbackFunctionObject("locAssocObjAction", context, parameters, false);
//Hide New Button, display only one view to pick up records, keep showing search button
LookupObjectsWithCallback(callbackRef, null, "multi", gridTypeCode, null, null, "", "0", null, 0, null, null, null, viewId, null, null, null, null, null, null, null, null, viewId);
}
//filters the Contact N:N lookup view from Case to show only Lawyers!!
function filterAddExistingContact(gridTypeCode, gridControl, primaryEntity) {
if (primaryEntity != "case") {
Mscrm.GridRibbonActions.addExistingFromSubGridAssociated(gridTypeCode, gridControl); //default button click function
return;
}
addExistingFromSubGridCustom(gridTypeCode, gridControl, this );
}

I uploaded the js file to the web resources of the CRM solution having the entities (including contact) and application ribbon . I downloaded RibbonWorkbench2013 version 2.0.1.3 to update the  behaviour of “Add Existing” button on the Contact Entity Sub Grid.

  • Open the Ribbon Workbench and select the CRM solution(s) containing the .js file, application ribbon and entities. Ensure no one else is modifying the CRM solution as their changes will be  lost when the ribbon workbench updates the solution.
  • When the solution is loaded into RibbonWorkbench, select entity contact.
  • Take an unmanaged backup of the CRM solution in case roll back is required
  • Under the SubGrid section, there are two “Add Existing” buttons, one for N:N and one for 1:N. The N:N (Mscrm.SubGrid.contact.AddExistingAssoc) is the second one. Right-Click on the second “Add Exiting” button and click on “Customize Command”
  • Expand “Commands” in the “Solution Elements”.
  • Select command  ‘Mscrm.AddExistingRecordFromSubGridAssociated’. In the “Properties: Command Action”  , replace the current FunctionName with the new function from your web resource (in the example code above, it’s the second function: filterAddExistingContact), and change the Library to the web resource. The parameter ” PrimaryEntityTypeName” needs to be added to the list of Parameters.

AmendRibbonSubGrid

  • Click on Publish from the solution and solution will be reimported with the changes.

OnlyOneCustomViewForContact

Navigate to the case entity form having the contacts sub grid to check whether only lawyers are displayed with no “New” button. When contacts Add Existing button for N:N relationships is clicked, the custom function displays only the Lawyers view.

Note: Filtering the Add Existing view using the method LookupObjectsWithCallback is unspported. It might break in the next release.

 

JSOM SharePoint Online Create Term with custom shared and local properties

The sp.Taxonomy.js can be used to create a term in the taxonomy store. I wanted to create Shared Custom properties on the term. However the JavaScript library on MSDN  mentions only  the method setLocalCustomProperty which creates or updates a local custom property.

The SetCustomProperty is mentioned in MSDN to use in CSOM managed code to create or update shared custom property on a term. There is a lack of documentation how to use the method in JSOM.  Following the convention of method name in JavaScript ,i.e. camelCase , I called the  method on a term object in JavaScript and it worked.

term.setCustomProperty("ClientId",1234);

The JSOM code below provides a UI to specify the term to create. To test the code, copy and paste the code into a JavaScript file, upload the JavaScript file into the site and reference the JavaScript file from a Content Editor WebPart.

CreateTerm

When the button “Create Term” is clicked, the term is created with the shared and local custom property.

TermWithCustomProperties

 

Search Display Template js file not created when HTML file for Item_ThreeLines is created

On a SharePoint Online site collection where Publishing feature was initially turned on and subsequently turned off, js file was not automatically created/updated whenever a display template was created/edited.

We wanted to have a search content web part with three lines instead of two lines. We created a new display template by following the steps below.

  • Navigate to Site Settings>Master Pages>Display Templates>Content Web Parts.
  • Download the file Item_TwoLines.html
  • Rename it to Item_ThreeLines.html
  • Edit title to Three Lines and wherever reference to Line 2 is made add corresponding reference to Line 3

  • Import the file into the  Site Settings>Master Pages>Display Templates>Content Web Parts library

However the js file was not created automatically since publishing feature was turned off.

The only option was to create the html display template in a site collection with publishing feature turned on, wait until the js is created automatically and migrate the js file and HTML file into the site collection where publishing feature is turned off. If the properties below are not set automatically, manually set the highlighted properties while uploading.

Item_ThreeLinesjs

The Item Template is accessible from any search web part added to the non publishing site collection

3_lines_Content_By_Search_WP.png

Insert link to CSS/JavaScript script from “Site Assets” library using custom action SharePoint

I had a requirement from a client to apply custom css and JavaScript to a site collection including sub sites.

The JavaScript file and Css file can be uploaded to “Site Assets” library using Module Element in SharePoint solution

Module element to deploy CSS file

<Elements xmlns=http://schemas.microsoft.com/sharepoint/>
<Module Name=CustomCss Url=SiteAssets>
<File Path=CustomCss\custom.css Url=CustomCss\custom.css />
</Module>
</Elements>

Module element to deploy CSS file

<Elements xmlns=http://schemas.microsoft.com/sharepoint/>
<Module Name=Jquery Url=SiteAssets>
<File Path=Jquery\jquery-1.11.1.min.js Url=Jquery/jquery-1.11.1.min.js />
</Module>
</Elements>

There are two options how to add the reference o the js file and css file

  1. The masterpage file can be modified to insert links to the JavaScript and css files.
  2. Use customaction to insert a link

I chose the second option which can be deployed as a sandboxed solution. To include a reference to  JavaScript in all pages in a SharePoint site from “Site Assets” library the customAction element is used with the ScriprSrc attribute.

<?xml version=1.0 encoding=utf-8?>
<Elements xmlns=http://schemas.microsoft.com/sharepoint/>
<CustomAction ScriptSrc=~SiteCollection/SiteAssets/jquery/jquery-1.11.1.min.jsLocation=ScriptLinkSequence=100“/>
</Elements>

To apply a Custom CSS deployed to “Site Assets ” library to a site the custom action element is used with ScriptBlock tag. The ScriptBlock generates the JavaScript code on the page which adds the reference to the css file when executed.

<?xml version=1.0 encoding=utf-8?>
<Elements xmlns=http://schemas.microsoft.com/sharepoint/>
<CustomAction Id=CssSiteCol Location=ScriptLinkScriptBlock=document.write(‘&lt;link rel=&quot;stylesheet&quot; After=&quot;Corev15.css&quot; type=&quot;text/css&quot; href=&quot;/PWA/SiteAssets/CustomCss/custom.css&quot;&gt;&lt;/’ + ‘link&gt;‘); Sequence=202 />
</Elements>

 

Project Server 2013 Make fields Read Only in PDP depending on SharePoint Groups the logged user belong to

I had a requirement depending on the SharePoint group the user belong some fields need to be read only.

The script below disable the field  “Project Code” on the PDP (Project Detail Page) if the user is not in the SharePoint group “Project Code”.

Copy the code snippet to a script editor web part in a PDP page.

jQuery.noConflict();

function IsCurrentUserMemberOfGroup(groupName, OnComplete) {
var currentContext = new SP.ClientContext.get_current();
var currentWeb = currentContext.get_web();
var currentUser = currentContext.get_web().get_currentUser();
currentContext.load(currentUser);

var allGroups = currentWeb.get_siteGroups();
currentContext.load(allGroups);

var group = allGroups.getByName(groupName);
currentContext.load(group);

var groupUsers = group.get_users();
currentContext.load(groupUsers);

currentContext.executeQueryAsync(OnSuccess,OnFailure);

function OnSuccess(sender, args) {
var userInGroup = false;
var groupUserEnumerator = groupUsers.getEnumerator();
while (groupUserEnumerator.moveNext()) {
var groupUser = groupUserEnumerator.get_current();
if (groupUser.get_id() == currentUser.get_id()) {
userInGroup = true;
break;
}
}
OnComplete(userInGroup);
}

function OnFailure(sender, args) {
OnComplete(false);
}
}

function IsCurrentUserHasContribPerms()
{
if (!jQuery(‘input[title=”Project Code”]’).prop(‘disabled’) )
{
console.log(jQuery(‘input[title=”Project Code”]’).prop(‘disabled’));
IsCurrentUserMemberOfGroup(“Project Code”, function (isCurrentUserInGroup) {
if(isCurrentUserInGroup)
{
jQuery(‘input[title=”Project Code”]’).prop(‘disabled’,false);
}
else
{
// alert(“user not in group”);
jQuery(‘input[title=”Project Code”]’).prop(‘disabled’,true);
}
});
}

}
ExecuteOrDelayUntilScriptLoaded(function(){setInterval(IsCurrentUserHasContribPerms, 250)}, ‘SP.js’);

Starting with React- Factorial react Component

React is an Open Source, client-side web library for building composable user interfaces developed by Facebook and Instagram. The Instagram website, Facebook’s comment and like components are  developed with React.

React home page provides code samples that run live and give results just next to it.

React_Facebook.JPG

The getting started page provides necessary documentation and has a download link for the Starter Kit that’s a convenient package that includes HTML templates, the React libraries and this set of examples.

DownloadReactStarterKit

Advantages
– Speed: React renders user interfaces faster.
– Declarative: React is a set of components , each of which declaratively defines a mapping between some state and the desired UI. The interface is only changed by changing the state. This make it easier to prevent bugs and reason.
– Composable: React components are self-contained units of functionality. Publishes a simple interface that defines inputs as properties and their outputs as callbacks. By implementing the interface, React components can be freely nested within each other.

Hello World Component

The React.Js Component can be described as below where HTML is the output while state and properties are the inputs.

State,Properties –> var Component = React.CreateClass  –> HTML

A component can change its state but not its properties value. The component triggers a re-render event when state changes.

JsFiddle provides an interface to experiment with JavaScript code including React Library.

JsFiddle Hello World component is similar code to the one on React Homepage.

React_ExampleOfApplication.JPG

The React.createClass function is used to define components. In the example above, the “Hello” component is created and property “name” is assigned to it. The render method is used to generate HTML code with  variable interpolation.

React.render functions take a reference to the component defined and value of the property name and renders the HTML based on the second argument  “document.body” which tells React where to render the “Hello” component.

When React re-computes and re-renders component, it uses the virtual DOM(written in JavaScript). It finds the difference between previous DOM and end DOM and writes the difference only to the Browser’s DOM which makes React fast at rendering the UI.

Building a Factorial React component using Plunker

Plunker is another playground tool similar to JS Fiddle to try code without downloading the libraries.

Plunker.JPG

1. Click on Launch the Editor and click on “Live Preview”.

PlunkerLaunchEditor

The first tab shows the files available. The second tab shows the code and the third tab shows the results.

2.  Add reference to react library to the HTML page

https://fb.me/react-0.14.3.js

ref_To_React.JPG

3. Change the extension of the script file to jsx. This will tell React to parse the file as JSX and can be referenced as a js file from within the HTML page.

jsx.JPG

4.  Add reference to the script.js file into the index.HTML file

5.  Replace the h1 element with a div element with id root. This is the element which will tie React with the DOM coexisting with other elements in the DOM.

Also add a h1 element with value Factorial.

index

6. Add the following to the Script jsx

var NextFactorialButton = React.createClass({
getInitialState: function() {
return {fac:1, counter:1};
},
generateNextFac: function() {
this.setState ({ fac: this.state.fac * (this.state.counter+1) ,  counter: this.state.counter + 1 });
},
render: function() {
return (
<button onClick={this.generateNextFac}>{this.state.fac}</button>
)
}
});
React.render(<NextFactorialButton />,document.getElementById("root"));

React_Factorial_Component.JPG

The factorial component displays a button with a click event which generates the next factorial number when clicked. The factorial number displayed in the browser DOM belongs to the state of the component. The component needs to re-render itself each time the value of factorial changes. Properties could not be used here as they are immutable.

The getInitialState function initialises and returns the state object of the component. The state of the component has two elements “counter” and “fac” initialised to 1.

The value of the state element is referenced within curly braces from the vitual DOM.

{this.state.fac}

The method “generateNextFac” is tied to the onClick event of the button.  The method this.setState allows to change the state of the elements.  The “counter” element is incremented by 1 while the “fac” element is multiplied by “counter” element  added to 1.

The React.render method takes the “NextFactorialButton” component and the root DOM element where the React will display the virtual DOM which is a button displaying the state of the factorial number.

When the factorial component initially loads, the button displays 1 and on each click displays  1, 2, 6, 24, 120, 720, 5040,etc…