Beyond the Canvas: Embed Miro's Magic in Salesforce

Disclaimer: I am not by any means a developer or someone who is an expert in any language other than English. However, over my career, I have picked up enough to be a novice in Salesforce. If you know a better way to code this component and would like to educate me or help the community feel free to let us know in the comments. I am happy to learn how to be better! Now let's get into it!

In today's fast-paced business environment, visual collaboration tools like Miro have become indispensable for brainstorming, mapping processes, and charting out project trajectories. But what if you could take this visual magic a step further?

Imagine the power of having these dynamic boards right within Salesforce, the heart of your customer relationship management. By embedding Miro boards directly into Salesforce, you not only centralize your team's collaborative efforts but also align them closely with customer data, sales strategies, and operational insights. This ensures that every stakeholder, from sales reps to project managers, has a holistic view of both the big picture and the granular details.

Let's dive into how you can harness this synergy and elevate your Salesforce experience beyond the canvas.

The embedded board in the above photo is dynamic, I have created a field on the Opportunity object named "Miro_Board_Link__c" that the link to the board is placed in and the code will be getting the link from. You can do this on any object, standard or custom but will just need to change the apex class to query from your object.

Step 1 - Create a custom field

Create the field on the Opportunity Object (or whatever object you want to display the Miro Board on). Name is Miro_Board_Link__c

Step 2 - Create the Apex Controller "MiroBoardController.apxc"

public with sharing class MiroBoardController {
@AuraEnabled
public static String getMiroBoardLink(Id recordId) {
//Replace this query with your query to get the field with the link to your Miro board
Opportunity opp = [SELECT Miro_Board_Link__c FROM Opportunity WHERE Id = :recordId LIMIT 1];
        return opp.Miro_Board_Link__c;
    }
}        

Step 3 - Create an Aura Component "MiroBoard.cmp"

I know it's old school but as I said in the disclaimer, I am not a developer so if you know how to do this better with an LWC or something else please feel free to teach me in the comments.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="MiroBoardController">
    <aura:attribute name="miroBoardUrl" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<div class="slds-m-around_medium">
 <iframe src="{!v.miroBoardUrl}" width="100%" height="600" frameborder="0" title="Miro Board"></iframe>
 </div>
</aura:component>        

Step 4. The JavaScript - MiroBoardController.js - the client-side controller

I struggled to another dimension trying to figure this out. I would like to thank the collective knowledge of google.com for the completion of this JS controller.

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getMiroBoardLink");
        action.setParams({
            recordId: component.get("v.recordId")
        });
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.miroBoardUrl", response.getReturnValue());
            }
            // Handle any errors here
        });
        
        $A.enqueueAction(action);
    }
})        

Step 5 - MiroBoard.svg - the SVG file to provide an icon for your component in the Lighting App Builder

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
</svg>        

Step 6 - MiroBoard.design - The design file to make the Miro board URL configurable

<design:component>
    <design:attribute name="miroBoardUrl" label="Miro Board URL" description="URL of the Miro board to embed" />
</design:component>        

Step 7 - Time to see if it works

Go ahead and save all the files, if you haven't already, and hop over to the Lighting Record Page of the object you create the component for, in my case, the Opportunity Lighting Record Page, and hit edit.

On the left-hand side under "Components" scroll down to the "Custom" section and there you will see your newly created component called MiroBoard. Drag it where you want on your record page, I recommend putting it in an Accordion but you do you.

Save and Activate the page and edit the field Miro Board Link with a public Miro Board Link, save, refresh the page and BOOM you have yourself a Miro Board embedded in your Salesforce instance.

In summary, this article demonstrates a practical approach to embedding Miro boards into Salesforce, enhancing collaborative and management processes. Through a series of straightforward steps, we've seen how to create a custom field, an Apex controller, and an Aura component, culminating in the embedding of a dynamic Miro board within the Salesforce environment. This component is for teams seeking to align their collaborative efforts with customer relationship data, offering a more cohesive and efficient workflow. As always feedback and additional insights are always appreciated to refine and improve this component.

Disclaimer: The views, thoughts, and opinions expressed in my posts are solely my own and do not necessarily reflect the standpoint or official policy of any company I am currently employed with or have been associated with in the past. The content provided is intended for informational purposes and is not meant to serve as an official statement or representation of my employers, past, present, or future.