Custom Page – GIF for the win🏆

Most of you might know by now that I am a huge fan of GIF’s. I have written about GIF’s earlier when trying to motivate sales people, and I thought I would turn it up one notch!

Last post I wrote was about the opportunity close dialog. It was functional, but not exciting.

It is still 100% more feedback friendly than the Microsoft OOTB functionality, but it’s a little boring now that we have the option to be creative. This is why I thought I would add my earlier GIF post together with this to create a solution for instant response to the salespeople.

We all know that there is no better feeling than finding the correct GIF! 😂

So let’s start off by including a flow that I have written earlier with the Custom Page Confirmation dialog to make it all a little better than the thumbs up that my last post was showcasing.

RUN Instant Flow when completing sales

In the last post we covered the Power Automate action when the confirmation button was pressed. Now we reopen it to add a few more steps. The steps are identical to the steps I have linked to above in the article that coveres GIF connector.

First let’s query for a WIN gif.

Go to Giphy and setup a developer account for free. I have written about it in the GIF post that I have on top here. Just replace the api_key value in the string:
https://api.giphy.com/v1/gifs/random?api_key=**********&tag=win

Parse the return of this query (SORRY.. This is a bit long!)

{
    "type": "object",
    "properties": {
        "data": {
            "type": "object",
            "properties": {
                "type": {
                    "type": "string"
                },
                "id": {
                    "type": "string"
                },
                "url": {
                    "type": "string"
                },
                "slug": {
                    "type": "string"
                },
                "bitly_gif_url": {
                    "type": "string"
                },
                "bitly_url": {
                    "type": "string"
                },
                "embed_url": {
                    "type": "string"
                },
                "username": {
                    "type": "string"
                },
                "source": {
                    "type": "string"
                },
                "title": {
                    "type": "string"
                },
                "rating": {
                    "type": "string"
                },
                "content_url": {
                    "type": "string"
                },
                "source_tld": {
                    "type": "string"
                },
                "source_post_url": {
                    "type": "string"
                },
                "is_sticker": {
                    "type": "integer"
                },
                "import_datetime": {
                    "type": "string"
                },
                "trending_datetime": {
                    "type": "string"
                },
                "images": {
                    "type": "object",
                    "properties": {
                        "downsized_large": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "fixed_height_small_still": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "original": {
                            "type": "object",
                            "properties": {
                                "frames": {
                                    "type": "string"
                                },
                                "hash": {
                                    "type": "string"
                                },
                                "height": {
                                    "type": "string"
                                },
                                "mp4": {
                                    "type": "string"
                                },
                                "mp4_size": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "webp": {
                                    "type": "string"
                                },
                                "webp_size": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "fixed_height_downsampled": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "webp": {
                                    "type": "string"
                                },
                                "webp_size": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "downsized_still": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "fixed_height_still": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "downsized_medium": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "downsized": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "preview_webp": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "original_mp4": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "mp4": {
                                    "type": "string"
                                },
                                "mp4_size": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "fixed_height_small": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "mp4": {
                                    "type": "string"
                                },
                                "mp4_size": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "webp": {
                                    "type": "string"
                                },
                                "webp_size": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "fixed_height": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "mp4": {
                                    "type": "string"
                                },
                                "mp4_size": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "webp": {
                                    "type": "string"
                                },
                                "webp_size": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "downsized_small": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "mp4": {
                                    "type": "string"
                                },
                                "mp4_size": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "preview": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "mp4": {
                                    "type": "string"
                                },
                                "mp4_size": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "fixed_width_downsampled": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "webp": {
                                    "type": "string"
                                },
                                "webp_size": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "fixed_width_small_still": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "fixed_width_small": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "mp4": {
                                    "type": "string"
                                },
                                "mp4_size": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "webp": {
                                    "type": "string"
                                },
                                "webp_size": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "original_still": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "fixed_width_still": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "looping": {
                            "type": "object",
                            "properties": {
                                "mp4": {
                                    "type": "string"
                                },
                                "mp4_size": {
                                    "type": "string"
                                }
                            }
                        },
                        "fixed_width": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "mp4": {
                                    "type": "string"
                                },
                                "mp4_size": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "webp": {
                                    "type": "string"
                                },
                                "webp_size": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "preview_gif": {
                            "type": "object",
                            "properties": {
                                "height": {
                                    "type": "string"
                                },
                                "size": {
                                    "type": "string"
                                },
                                "url": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                }
                            }
                        },
                        "480w_still": {
                            "type": "object",
                            "properties": {
                                "url": {
                                    "type": "string"
                                },
                                "width": {
                                    "type": "string"
                                },
                                "height": {
                                    "type": "string"
                                }
                            }
                        }
                    }
                },
                "user": {
                    "type": "object",
                    "properties": {
                        "avatar_url": {
                            "type": "string"
                        },
                        "banner_image": {
                            "type": "string"
                        },
                        "banner_url": {
                            "type": "string"
                        },
                        "profile_url": {
                            "type": "string"
                        },
                        "username": {
                            "type": "string"
                        },
                        "display_name": {
                            "type": "string"
                        },
                        "description": {
                            "type": "string"
                        },
                        "is_verified": {
                            "type": "boolean"
                        },
                        "website_url": {
                            "type": "string"
                        },
                        "instagram_url": {
                            "type": "string"
                        }
                    }
                }
            }
        },
        "meta": {
            "type": "object",
            "properties": {
                "msg": {
                    "type": "string"
                },
                "status": {
                    "type": "integer"
                },
                "response_id": {
                    "type": "string"
                }
            }
        }
    }
}

At the end we have to respond to the app with the GIF URL that we want to use. There are many variables that have the same name “URL”, so make sure you find the one that I am using below.

Back to the Custom Page

The “Confirm Win” button now has to do a few more things, so here is the added code.

//Patch the Oppty fields
Patch(
    Opportunities,
    LookUp(
        Opportunities,
        Opportunity = GUID(VarOppportunity.opportunityid)
    ),
    {
        'Actual Close Date': EstClosingDate.Value,
        'Actual Revenue': Int(EstimatedRevenue.Value)
    }
);

//Update Opportunity Close entity and retreive GIF
Set(varFlow, CloseOpptyPostTeams.Run(VarOppportunity.Opportunity));
Set(varGIF, varFlow.urlgif);

//Hide input boxes and show confirmation
Set(
    varConfirmdetails,
    false
);
Set(
    varCongratulations,
    true
);

Mostly the only difference here is adding 2 variables. 1 that is the actual response from Power Automate (all of the fields), and the other one is setting a variable “varGIF” for use in our new image component that we add on the sales confirmation box.

Let’s check out that GIF!

Add an image to the Congratulations group, and reference the varGIF

Final Product 💘

When the sales person now closes the dialog, they get a 100% more awesome experience than the OOTB version!!! 🏆👍🎉


Discover more from CRM Keeper

Subscribe to get the latest posts to your email.

Leave a comment