Dynamics 365 – Open entity form using Javascript (with Parameters)

I had a function in a CRM upgrade that was nice and small.

locAddRelatedTo(crmFormSubmit.crmFormSubmitObjectType.value);

It would open up a copy of the entity I was on with some lookups populated, great right? Well it was. Back in CRM 4 days but not much use now.

Instead you now need to use Xrm.Utility.openEntityForm as below:-

    var parameters = {};
    var childEntityName = Xrm.Page.data.entity.getEntityName();

    //Provide parent record guid
    parameters["_CreateFromId"] = Xrm.Page.data.entity.getId().replace("{", "").replace("}", "");

    //Provide parent record entity type code
    parameters["_CreateFromType"] = Xrm.Page.context.getQueryStringParameters().etc;


    if (Xrm.Page.getAttribute("sampleLookup").getValue() != null) {
        parameters["sampleLookupFieldName"] = Xrm.Page.getAttribute("sampleLookupFieldName").getValue()[0].id.replace("{", "").replace("}", "");

// Note the name on the end
        parameters["sampleLookupFieldNamename"] = Xrm.Page.getAttribute("sampleLookupFieldName").getValue()[0].name;

// Not the type on the end
        parameters["sampleLookupFieldNametype"] = Xrm.Page.getAttribute("sampleLookupFieldName").getValue()[0].entityType;
    }
    
    if (Xrm.Page.getAttribute("sampleFieldName").getValue() != null) {
        parameters["sampleFieldName"] = Xrm.Page.getAttribute("sampleFieldName").getValue();
    }

Xrm.Utility.openEntityForm(childEntityName, null, parameters);

This opens a new form BUT throws an error. You then need to go into your Customizations, find the form, go to Parameters and make sure that all parameters are listed like so.

Parameters

Then the form should display with fields pre-populated.

Angular – Preview Image before Saving it

I came across a few samples of how to preview an image before saving it. So he’s my version “Angularfied”!

Here’s the app.component.ts (obviously move as you wish!)

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // This is our callback to get the URL out of the onload function
  private  urlPointer: (name: string) => void;
 
  // Our temp url value
  url: string;
 
  /*
    loadFileTest triggered by (change)='loadFileTest($event)' in the html
  */
  loadFileTest(event) {
    this.getFileForPreview(event.target, this.urlPointer = (url) => this.setLocalURL(url));
  }
 
  /*
    getFileForPreview
    fileInput - event.target from the change event
    callbackFunction - pointer to our callback function (setLocalURL)
  */
  getFileForPreview(fileInput, callbackFunction) {
    const reader = new FileReader();
    reader.onload = function(){
      // setLocalURL with reader.result (a string)
      callbackFunction(reader.result);
    };
    // This is what actually creates our URL
    reader.readAsDataURL(fileInput.files[0]);
  }
 
  setLocalURL(url: string) {
    // Our call back function which gets the url and saves it to our url variable
    this.url = url;
  }
}

Then we just need to add the following HTML

<input type='file' accept='image/*' (change)='loadFileTest($event)'><br>
<img id='output' src='{{ url }}'>

As easy as that! ūüôā

Developers vs Designers

So we at SSW are looking to upgrade our Intranet using SharePoint 2016 and the brief was to use the functionality coming later in 2017 to make a really great user experience.

So I watched An overview of SharePoint communication sites and took a screenshot of some of the new features coming to SharePoint.

As the designer I was working with was on other work I decided to put something together myself using my endless talent and Paint.Net.  So in the end I came up with this:-

It has all the required information, its nice a clean and I was pretty happy with myself. ¬†To me it covers the basics of the design brief,¬†It uses the new functionality, and its a rich interface. ¬†So a few days later the designer was available again and I gave her my design to touch it up a bit and here is the result: –

I’ll forgive you for suggesting the designers is better. ¬†Its the same elements (minus a few changes from the boss!) in such a more rich and appealing format. ¬†A designer considers the composition, the font, and lots of other things I probably don’t understand to get to a rich user experience. ¬†My focus on the other hand is on how does it work functionally and does it meet my basic requirements.

Obviously I was put back in my box and quickly remembered why I don’t do design and at the same time remembered why Design is such an important part of modern IT. ¬†If your project doesn’t have a designer then are you really seeing the best result you could?

Wait SharePoint isn’t terrible?

As a developer I like many of you found SharePoint to be an annoying enigma. ¬†It wasn’t perfect as a document repository¬†however it was much better than it was as an Intranet or home page. ¬†It tried to be a jack of all trades and ended up struggling at most. ¬†Web Parts¬†were frustrating to develop and deploy, Home pages required templates that had been hacked by members of the general public, and¬†pages required large amounts of work to get mobile responsive. ¬†Because of these frustrations I walked away happily from SharePoint and kept my engagement with it to a minimum.

However I was recently asked to assist with our migration from SharePoint on premise to SharePoint online which made me look into how we could update our intranet page and the more I investigated the more amazed I became. ¬†I honestly believe if they gave it a new name and didn’t call it SharePoint then developers would be singing its praises. ¬†Expect to see SharePoint back on your radar soon and you no longer need to be disappointed. ¬†Here’s a few reasons why SharePoint is now much better than ever.

No more public sites

SharePoint as a public website always seemed like a poor idea.  The user interface never seemed to be great and the effort involved and hacks required to setup a site always seemed to make it cost and time prohibitive.

When compared to other content management systems it just never stacked up.  Microsoft has now dropped this as a feature which is a good thing for us developers who have dealt with public sites in the past.

 

SPFx Tools

If you’ve watched the SharePoint talks from Build 2017 or read up on the upcoming changes you would have seen the Open Source tooling shown on Microsoft slides. ¬†Even writing that sentence still feels confusing to me (Microsoft and Open Source) however you can now develop with your favourite open source tools, using your favourite JavaScript framework, and using the editor of your choice. ¬†Expect some teething problems with this however its a wonderful step forward.

 

Page Design Interface

Remember how “easy” it was to create pages in SharePoint in the past? It was apparently designed so that end users could make changes easily and while that might have been true for minor changes (spelling updates, pictures changes etc) this was far from the truth. ¬†The more time you spent looking at creating pages the more you found you needed hacks to do so many parts.

SharePoint 2016 provides a rich collection of parts that can be combined to create rich designs. ¬†Some of these components won’t be available until SharePoint 2016 Feature Pack 2 due later in 2017 but when they come expect a large uptake on SharePoint by clients.¬† ¬†

Web Part to Web Part interaction

The release date for this functionality is still a bit unknown so it will hopefully be part of Feature Pack 2 but it might not be.  However the SharePoint team are working hard to allow for connections between Web Parts.  This will be great when implementing rich user experiences such as a detail component for a list for example.

 

Summary

As said by the SharePoint team, up to now there has been so many hacks to get SharePoint how companies want it and SharePoint 2016 has been designed so you no longer need those hacks and has been designed with Modern Web Design in mind.

You can now use your web design skills to create a rich intranet experience and clients are going to love the ease of use.

If SharePoint takes off in the next year or so you heard it here first, otherwise you get your money back on this post.

Angular – Class initializers in TypeScript

One thing that is great in C# is the ability to¬†initialise values on create like so: –

MyObject test = new MyObject { Name="Test", Description="This is a description" };

With the release of TypeScript 2.1 you can now do something similar: –

export class MyObject{
    public Name: string;
    public Description: string;

    public constructor(
        fields?: {
            Name?: string,
            Description?: string
        }) {
        if (fields) Object.assign(this, fields);
    }
}

Then you can use is like so:-

new MyObject({ Name:"Test", Description="This is a description" });

Just make sure that in your package.json that devDependencies has typescript 2.1 or higher.

Dynamics CRM ‚Äď Going, going, gone

If you or your clients have been using Dynamics CRM it’s time to embrace the future.  Microsoft has combined their Dynamics offerings into a single solution now called Dynamics 365.

If you‚Äôre using Dynamics CRM Online you would have already noticed this change and if you‚Äôre using On Premise then it‚Äôs time to start planning your upgrade.¬† Dynamics 365 is now setup as follows: –

1

Sales, and Customer Service leverage heavily on Dynamics CRM functionality, while Operations is based on Dynamic AX, Finance is based on Dynamics NAV/Project Madeira, marketing is a cooperation with Adobe and their marketing cloud offering (build in progress) and the others use a bit of functionality from various other Microsoft projects including some Dynamics.

The issue with the Dynamics family has always been they have been siloed products that have been hard to integrate.¬† With Dynamics 365 Microsoft have created an end to end solution for your whole customer lifecycle.¬† Long term the products will be merged together however at the moment it‚Äôs just a tightened coupling of the Dynamics suite of product. Short term there is a few awesome features in Dynamics 365 (or in the last release of Dynamics CRM 2016) which you should be using: –

Editable Grids

People have been screaming out for this for a long time.  You can select Editable grids for controls or leave them as the standard Read Only type that users are familiar with.  The ability to allow it only on Web is also a nice feature.

2

Simple one click to edit

3

Validation inbuilt.

4

 

Power BI integration

Organisation’s love Power BI and now you can imbed it directly into Dynamics 365.  Power BI is a powerful tool that is surprisingly easy to use.  Allowing for key information to be displayed on the dashboard.

Integration with all your Microsoft products

Dynamics 365 is designed to out of the box work with all Microsoft’s suite of products so you can extend it in some amazing ways.

Some of the tools 365 integrates with: –

  • Azure Machine Learning
  • Cortana
  • Microsoft Flow
  • Office 365
  • PowerApps
  • PowerBI
  • SharePoint

Updated SDK code. Upgrading the End Points

If you have old Integration points I strongly suggest you start investigating Microsoft.Xrm.Tooling.  The old OData endpoint is now deprecated and Web API is the way to go.

You can get the SDK from Microsoft’s website (however I had issues with that code) or you can get the NuGet package

https://www.nuget.org/packages/Microsoft.CrmSdk.XrmTooling.PackageDeployment/

Have a look at the following pages to get up to speed quickly on the Xrm Tooling functionality.

https://msdn.microsoft.com/en-au/library/dn689019.aspx

https://msdn.microsoft.com/en-us/library/mt608573.aspx

Copy Environment Variables between Windows Users

So I have multiple users setup on my machine and was having issues with the Environment Variables.  Whenever I did it manually I always seems to have some issues.

Then I finally stumbled over the following in the ancient archives known as Stack Overflow.

http://stackoverflow.com/questions/559816/how-to-export-and-import-environment-variables-in-windows

 

Run the following two commands and it generates two .reg files you can easily run in your other user.

regedit /e "%CD%\user_env_variables.reg" "HKEY_CURRENT_USER\Environment"
regedit /e "%CD%\global_env_variables.reg" "HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Environment"

Why I love Angular

Having recently started at SSW (https://www.ssw.com.au) I had to learn Angular.  I had heard a bit about it however being firmly in the .Net space I had never learnt anything in detail.

I jumped online and found an course on Udemy by Mosh Hamedani (http://programmingwithmosh.com/) Angular 2 with TypeScript for Beginners: The Pragmatic Guide (https://www.udemy.com/angular-2-tutorial-for-beginners/) and started on my way. NOTE:- Use the Angular CLI for cleaner projects!

Below is a few reasons why I love Angular!

Components!

I found the setup and starting processes quite straight forward.  Angular is based on Components which allows us to break up our code into small chunks.  For example lets look at a basic page layout.

layout

We have 3 top level Components (Header, Content, and Footer) and then within Header we have two other components. Each component has its own HTML markup and can interact with the user in different ways.  We can create all of our pages as components that will be displayed in the content space making single page applications easy.

Once we are setup and running the main driver of our site is the app.component.ts file. This TypeScript file is the initial component rendered by our site by default and by adding in some Angular tags we can declare our components.

app-component

Above is the base component with our header, router-outlet (where our content goes), and our pagefooter.  Then we can create a header component and add in our children.

header-component

Now obviously we need to add in some CSS to control location however as you can see our components can be added easily by including a¬†tag (You also need to include them in your app.module.ts however that’s a discussion for a different day!) and we can then go to work on the individual components.

Without even trying using components has forced us to use the DRY (Don’t repeat yourself) and KISS (Keep it simple stupid) principals. ¬†You obviously could put all your code in one component however if you’re doing that you have bigger issues than worrying about principals! ¬†By using components we ensure reuse is simple to achieve.¬†An example would be¬†if you want to have a page showing cars for sale, create a car component and then repeat it for your data set!

Dependency Injection out of the box!

As someone who understands Dependency Injection but found it harder than it should have been I love how it is built into Angular.

So in Angular I need to use the http object when making service calls so its best if I just inject it. ¬†Here’s my code:-

injected

See what I did there? NOTHING!! I just called it in my constructor and set it to private so its accessible within my whole Component. ¬†I didn’t have to do anything else (although the http or other objects do need to be set to Injectable) and it just works! If you’ve been annoyed with Dependency Injection in the past¬†like me then I’m sure you understand how awesomely simple this is!

Separation of concerns

Ok this might actually be a cheat as any client framework has the same ability however I love it.  In the past I have always had issues with separation of concerns.  So many Developers put all their code into one Project which makes maintenance/deployments REALLY annoying.

With client side frameworks like Angular? You can’t do it. ¬†Your data context is firmly tucked away server side while your connection to it is done at the client. ¬†It¬†clearly separates the UI from the data layer forcibly.

In Summary

If you are a superstar developer you’re probably looking at the above thinking “Big deal I do that anyway” however that isn’t the point. ¬†In Development like anything in life you are only as strong as your weakest link. ¬†There is no point creating amazing code that only you can maintain, instead you want something maintainable by the whole team without you having to explain every detail to them.

That is why I love Angular, it forces even the weakest of coders to follow the basic principals of development which means better code and better applications. ¬†Yes there are a lot more technical reasons why it is awesome that I haven’t mentioned however whenever I look at frameworks I always want to know “How will it help me”¬†and Angular helps me by ensuring that I and my whole team follows the basic standards which while this should always be done sadly isn’t always the case!