Custom Page – Open Page with Ribbon Button

I am using Dynamics 365 as an example, but the process will be the same for Power Apps. Only difference is that Dynamics 365 has the Opportunity table that we are wanting to use.

If you want to learn more about Custom pages I suggest you look at the following posts:
Scott Durrow
Lisa Crosby
MCJ
Microsoft Custom Pages

I have also added the simple button setup to Github, if you just want to give it a go.
👉DOWNLOAD SIMPLE BUTTON HERE👈

Creating an app and adding the button

Start off by adding an app to a solution and giving it a proper name. In my case, I am choosing Sales Win, because I am creating a simple app for everyone to see the functionality. You could of course just add this to your existing app if that is what you want to do.

For the tricky part, you need to open the Command Bar. This is essentially Ribbon Workbench jr😉 In time I would only imagine that most of the Ribbon Workbench would be available here, but we are probably still a few years away from a complete transition here.

Choose the main form for this exercise, and then create a new Command. Command is actually a button. Why it’s called Command I’m not sure as we all are used to add buttons to a ribbon🤷‍♂️

On the right side, you can add an image, and I usually find mine through SVG’s online.
SVG’s for download <- a blog post I wrote about the topic. Add this as a webresource.

Now, we are going to have to create some JavaScript. It’s actually the only way to open a Custom Page. The JavaScript is pretty “simple”, and I will provide you with the copy-paste version.

JavaScript

🛑BEFORE YOU STOP READING BECAUSE OF JAVASCRIPT🛑

I will provide the JavaScript you need. Unfortunately, you will still need to understand how to copy-paste some script for stuff like custom pages to work.

The only parameter you have to change here if you are creating everything from scratch is:
name: “saleswin_saleswin_c0947” <- replace with the name of your custom page.

function CloseWON(formContext) {
    //Get Opportunity GUID and remove {}
    var recordGUID = formContext.data.entity.getId().replace(/[{}]/g, "");
    // Centered Dialog
    var pageInput = {
        pageType: "custom",
        name: "saleswin_saleswin_c0947", //Unique name of Custom page
        entityName: "opportunity",
        recordId: recordGUID,
    };
    var navigationOptions = {
        target: 2,
        position: 1,
        width: {value: 450, unit: "px"},
        height:{value: 550, unit: "px"}
    };
    Xrm.Navigation.navigateTo(pageInput, navigationOptions)
        .then(
            function () {
                // Called when the dialog closes
                formContext.data.refresh();
            }
        ).catch(
            function (error) {
                // Handle error
                alert("CANCEL");
            }
        );
}

This JavaScript opens up a custom page and sends in a GUID parameter (look at PageInput) to use within the page. This is just how Custom Pages work, so don’t try to do any magic here!

Other examples of how to load a custom page:
Microsoft Docs Custom Page

Hide-Show button

It’s important to hide or show the button at the correct times, and that is why you have to add logic. With the following function, the button is only visible when the Opportunity is in edit mode. When creating a new Opportunity you will not see this button.

Self.Selected.State = FormMode.Edit

Add a new page to your solution

A custom page is a lot like a Canvas App, but it’s not exactly the same. Not all functionality is the same as a Canvas App, so you need to get familiar with it first.

The first thing I noticed was the lack of multiple screens.

It seems not impossible to add more screens, but Microsoft has hidden this feature. The reason seems to be related to isolating a Screen to be a specific application. Might make sense, but not for my use case. It does make somewhat sense because a Custom Page can be opened from everywhere within Model Driven Apps. It’s actually not tied to anything (entity) at all. If you need to turn it on: 👇

Please don’t judge this Canvas App ATM. It will only get better over time 😂

I added labels and text boxes without any logic to them yet and added a data source for Opportunities. This is all for the next step of our configuration of the Sales Win dialog.

Last step (maybe the most important one)

We now need to add the custom page to the APP.

Make sure you UNCHECK the “Show in navigation”. Otherwise, you will see this page as a navigation option on the left side like account, contact, oppty etc.

Finally, publish in the ribbon editor

What have we achieved so far?

Once the button is pushed, the Custom Page loads. 🙏👍🎉

Custom Page Multiple Screens

Custom pages can only have one screen… Right? No, actually they can have multiple screens like a normal Canvas App

I was a bit surprised when learning this because I have been told that there only was one screen per Custom Page. Turns out that Microsoft only recommends one screen pr Custom Page, because they want to isolate the pages better, and rather navigate between custom pages.

In some cases, you actually just want a simple screen instead of a new Custom Page.

Enabling multiple screens

This might be old news for many, but I for one did not notice this before recently🤷‍♂️

Dynamics Customer Service Solution 2.0

A while back I released a Customer Service solution to get a DEMO or Simple production system up and running withing an hour.

Due to recent updates to email to case and templates, the solution I had created failed every time on installation. After a few weeks with Microsoft Support we sorted it out, and the solution is back working again!😀😀🙏🎉🎉🥂🍾

Remember to get the latest version (18 or above) of solution from the GitHub folder.

The main change in the setup is the email to case is now a part of Power Automate, and no longer a part of our good friend WorkFlow

I wrote about it in my blog a while back how to create Email -> Case the new way

Quick guide for email using the new solution import

After importing the solution you will now find “Email 2 Case” in the Automatic Record Creation area. Open this via the Customer Service HUB

Make sure you select your Queue that you have added earlier ADD QUEUE

Open the Email 2 Case Flow to see the structure that Microsoft now has create for Email to Case.

If you like adding the Team as owner to the cases (Optional), you have to add this line to the Owner field in the Flow.

NB! You have to retrieve the GUID from the Team in CRM.

Fining the Team GUID

Last step is to Activate the email to case record creation.. At this point you should be able to see emails entering CRM via Cases.

AI Builder + Lobe

During the recent Arctic Cloud Developer Challenge Hackathon I was playing around with AI Builder for the first time. The scenario we were going to build on there was the detection of Good guy / Bad guy.

The idea was that the citizens would be able to take pictures of suspicious behavior. Once the picture was taken, the classification of the picture would let them know if it was safe or not.

For this exercise I would use my trusted BadBoy/GoodBoy nephew toys:)

Lobe

To start it off I downloaded a free tool called Lobe. www.lobe.ai . Microsoft acquired this tool recently, and it’s a great tool to learn more about object recognition in pictures. The really cool thing about the software is that calculations for the AI model are done on your local computer, so you don’t need to setup any Azure services to try out a model for recognition.

Another great feature is that it integrates seamlessly with Power Platform. Once you train you model with the correct data, you just export it to Power Platform!👏

The first thing you need to do is have enough pictures of the object. Just do at least 15 pictures from different angles to make it understand the object you want to detect.

Tagg all of the images with the correct tags.

Next step is to train the model. This will be done using your local PC resources. When the training is complete you can export to Power Platform.

It’s actually that simple!!! This was really surprising to me:)

Power App

Next up was the Power App the citizens were going to use for the pictures. The idea of course that everyone had this app on their phones and licensing wasn’t an issue 😂

I just added a camera control, and used a button to call a Power Automate Cloud Flow, but this is also where the tricky parts began.

An image is not just an image!!!!! 😤🤦‍♂️🤦‍♀️

How on earth anyone is supposed to understand that you need to convert a picture you take, so that you can send it to Flow, only there to convert it to something else that then would make sense???!??!

Image64 and Power Automate – What a shit show

After asking a few friends, and googling tons of different tips/trics I was able to make this line here work. I am sure there are other ways of doing this, but it’s not blatantly obvious to me.

Set(WebcamPhoto, Camera1.Photo);

Set(PictureFormat,Substitute(Substitute(JSON(WebcamPhoto,JSONFormat.IncludeBinaryData),"data:image/png;base64,",""),"""",""));

'PowerAppV2->Compose'.Run(PictureFormat);

The receiving Power Automate Cloud Flow looked like this:

I tried receiving the image as a type image, but I couldn’t figure it out. Therefore I converted it to a Base64 I believe when sending to Flow. In the Flow I again converted this to a binary representation of the image before sending it to the prediction.

The prediction on the other hand worked out really nice!! I found my model that I had imported from Lobe, and used the ouputs from the Compose 3 action (base64 to binary). I have no idea what the differences are, but I just acknowledge that this is how it has to be done.. I am sure there are other ways, but that someone will have to teach me in the future.

All in all it actually worked really well. As you can see here I added all types of outputs to learn from the data, but it was exactly as expected when taking a picture of Winnie the Poo 😊 The bear was categorized as good, and my model was working.

Why Lobe?

One can wonder why I chose to use Lobe for this, when the AI Builder has the training functionality included within the Power Platform. For my simple case it wouldn’t really matter what I chose to use, I just wanted to test out the newest tech.

When working with larger scale (numbers) of images, Lobe seems to be a lot easier for the importing/tagging/training of the model. Everything runs locally, so the speed of training and testing is a lot faster also. It’s also simple to retrain the model an upload again. This being a hackathon it was important to try new things out 😊

More about AI builder

I talked to Joe Fernandez from the AI builder team, and he pointed me to some resources that are nice to checkout regarding this topic.

https://myignite.microsoft.com/sessions/a5da5404-6a25-4428-b4d0-9aba67076a08 <- forward to 11:50 for info regarding the AI Builder

https://youtube.com/watch?v=MQQmDUCufS8 <- Lobe

Azure Authenticator APP Backup

I know I know.. This post is nothing near Power Platform or Dynamics, but it’s just a friendly reminder that you need to check you backup of the Azure Authenticator App on your phone.

I don’t really feel the need to explain what the app is, because I expect everyone reading my blog to be aware of the application on some shape or form (private and business). As a consultant your application might look something like mine (pages and pages of entries):

This is literally pages and pages of logins for customers that have 2 factor authentication setup. Loosing access to this will be a serious pain in the A**!! Well, that is exactly what happened the other day without me having any idea why. 🤬🤬🤬

Of course I headed on over to my backup just to see that THE BACKUP WAS NOT THERE!!

Well, the backup was there, but it was a stale backup from 1 year ago. For some reason the application had stopped doing the auto backups. 🤦‍♂️🤦‍♂️

What todo?

Just make sure backup is turned ON, AND make sure that it is backing up automatically 😂
1. Open Settings
2. Turn on
3. If already on, click Details to look at the latest date for backup.

Image from Microsoft.

Read how to Backup / Restore from Microsoft

Business Unit Name Change

Something small, but yet useful. Thank you Tanguy for the tip🤗

As you probably figured out the Default Business unit name is something you can’t change OOTB after you have created a CRM/Dataverse environment.

If you are not careful when creating a new environment the org name will be set for you, and that is also when the Business Unit Name is set.

This can result in the following main Business Unit, and it just doesn’t make any sense. Also you can’t change it because Parent Business needs to be entered. Problem is that there is no parent to the parent in this case 🤣

XrmToolBox – Bulk Data Update to the rescue😎

Open the view for active Business Units and find your result.

⛔NB!! Make sure your search only returns one business unit

Next thing you do is set a fixed value, add attribute to the bulk job, and the update the record.

GIF Custom Connector

In my last post I wrote about Adaptive Cards in Teams, but a vital factor for that adaptive card to be interesting is the content on the card. Dynamics 365 Sales Adaptive Card🚀.

One of the technical bits last time was connecting with an HTTP GET request to the API. I will be using the same information to create a custom connector so that anyone can reuse for the future 😁

Creating the Connector

Step one.. open https:///make.powerapps.com .

Step 2.. Break down the URL from the first picture like this

Step three… If you don’t really know how to do this, ask a friend!! 🙂

Step three again.. Enter the security settings. When entering the security settings and providing something more than blank, you will be prompted with the credentials first time you create a connection to the connector.

I broke the URL down further with the “api_key” as a query, so that it would show in the URL like the example on the first picture.

Step four.. Create a search tag like the one I had in the URL from the first picture

Step five.. Get the URL from the first picture with your API key, and add this to the import sample

Choose the GET in this case, and add the full URL

Your request should look something like this:

Step 6.. Add a connection to the connector and test with a tag. It should return some info like this:

Result

When you are done, you have a custom connector you can reuse from Power Apps, Flow or any other tool that can use custom connectors.

Connector Gallery 🌌

What better thing to do than release this to the https://connector.gallery when you are done creating a new connector?? :😁💪🥇

🚨Update🚨 Automatic record creation rules NOW!

If you are using email to case, SLA or any Automatic Record Creation in classic you really need to update your rules ASAP to the new UI.

I can’t seem to find the message in the make.powerapps.com, but it’s one of the first messages that appears when opening the classic editor in solutions.

This post is not going to comment the pros/cons of the old vs the new. I will have to come back to you on that one. I am simply stating that you have to do this because it’s not only being deprecated, but it is being shut down. Microsoft has actually created a migration path for the rules, and documented the process fairly well.

https://docs.microsoft.com/en-us/dynamics365/customer-service/migrate-automatic-record-creation-and-sla-agreements

I use these rules for the most in the email to case scenario. First it has some conditions, and then it has the actual create of the case record.

When running through the migration, it does in fact get the conditions correct when migrating, but not the owner that I have in the create statement later. This has to be manually added to the flow created by MS.

Post Migration

After the migration is done, I had the following:

A record rule in the new UI

The conditions also got migrated without issues

And a new flow that Microsoft Autocreates for the email to case record creation. The red box marks where I had to add the “owner” field for the Teams ownership that I normally use.

All of these steps are automatically added by Microsoft. This is also the case if you do a NEW Email to Case from the UI. It feels a bit odd to put my faith in the hands of something automatically created, but for now I have to go with the flow.

NB!!! REMEMBER TO CLICK THE SAVE BUTTON IN FLOW BEFORE ACTIVATING THE RULE

So far it seems to be working OK, but I have to do some more heavy testing before I can conclude that the Flow is as stable as the old rules within Dynamics. We are running it in production, so I will update if I see any problems 🤞

The rise of the Galleries🌌

By now I hope most people know the https://pcf.gallery (run by Guido Preite). A great page for sharing community components (PCF) and exposing awesome contributions to the rest of the world. 🌎

What I like about the PCF Gallery is the simplicity of the site only being about PCF components. This is why I asked Guido if we could create a similar site for other components regarding the Power Platform. He was so kind to share his code for the project, so Matt Beard and I decided to give it a go. 🤗

Connector Gallery

First out in list of future galleries is the CONNECTOR gallery . This site will contain all sorts of custom connectors for Power Platform that you can share with the community. If you want to contribute to this gallery, you only have to share the custom connector file you have on GitHub, and we will post it out!

Dynamics 365 Case add new contact missing

Recently I had this happen twice without really knowing why. The add new contact button was missing on the case form. In the old UI it was present, but in the new UI it was gone.

Problem

Luckily support found out that this is caused by the contact field containing some old “metadata”. All you have to do is remove it and add it back.

FIX

As you see here we have added the same field twice.. Now you can remove the “OLD” contact field and then publish..

Voila!

A pretty random thing to happen, but an easy fix:)