Calling Canvas App from Ribbon Button – Smart Button

Our goal is to call a canvas app from ribbon button and fill in the calling record in the canvas app. We will use Smart Button from develop1.net.

https://github.com/scottdurow/RibbonWorkbench/releases

Smart Button provides a unusually easy way to deal with the ribbon button ordeal. You just need to install the solution for smart button after ribbon workbench and then use ribbon workbench which will then show the Smart Button option.

Step 1: Install Ribbon Workbench from here.(https://www.develop1.net/public/rwb/ribbonworkbench.aspx)

Step 2: Install Smart Button from here.(https://github.com/scottdurow/RibbonWorkbench/releases)

Step 3: Open Ribbon Workbench and left side will show below option :

You get option to:

  1. Run Report
  2. Run Workflow
  3. Run Webhook
  4. Quick JS
  5. Open Dialog.

In this example, we are trying to open canvas app from ribbon button and passing parameter.

Lets create a environment Variable by the name test_CanvasAppUrl which will have the URL of canvas app.

We will configure it on Smart Button as shown passing the environment variable in as URL {%environmentvariable%}

The Smart Button create JS in the backend which then pass two paramter in the URL of canvas app:

  1. recordId
  2. recordLogicalName

You can consume them as below in your canvas app. We are setting the variable with recordId and recordLogicalName and then mapping the variable to a combobox control so that whenver our app loads, the contact combobox is auto filled.

Set(
    varRecordId,
    If(
        IsBlank(Param("recordId")),
        GUID("8940e7c2-46f6-eb11-94ef-000d3a4f597a"),
        GUID(Param("recordId"))
    )
);
Set(
    varRecordLogicalName,
    Param("recordLogicalName")
);
Set(
    contactId,
    LookUp(
        Contacts,
        Contact = varRecordId
    )
);

This will add button on contact form and on clicking it, it will open the canvas app. Here the combobox contact is set to the variable contactId.

The result will be like below. I have used the connection form in New mode.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: