Recording and browsing multiple videos per record

In this section we will learn how to associate multiple videos to each record of a given object, this time using the Opportunity standard Salesforce object.

As you can imagine, in order to map multiple videos to a single record, we need a junction object, to build the connection between the parent record, Opportunity in our example, and the recorded video instances. The NativeVideo package offers an out of the box junction object, that can be used to simplify and accelerate the implementation of this scenario. We will then:

1. Explore the NativeVideo default junction object and extend it with an Opportunity lookup field
2. Create a Lightning component for the video recording, to be used as Action in the Opportunity details page
3. Customise the Opportunity Lightning page adding the VideoList component, configured to display multiple videos

1. NativeVideo's default junction object

As briefly anticipated, NativeVideo offers a default junction object to connect standard or custom Salesforce objects with multiple videos per record. This object is called Video Junction (API Name "nativevideo__Video_Junction__c") and by default it contains a lookup to the Account and Contact objects, as well as the lookup to the Video. 

Let's proceed adding a new lookup to the parent object, so in our case to the Opportunity object. From the Object Manager in the Setup, open the Video Junction details and then move to the Fields & Relationships section, where you can click on the "New" button. Once the "Lookup Relationship" has been selected, pick "Opportunity" as value:

After naming the new field as preferred, e.g. "Opportunity", and making it visible to the required profiles, you can optionally include it in both Opportunity and Video Junction page layouts and finally save the new custom field.

Now that the junction object is ready to connect opportunities with multiple videos, let's add recording capabilities to the details page in Salesforce. However, please note that it's not mandatory to use the junction object provided by NativeVideo, any object can be used as junction.

2. Multiple video recorded for each record

In the Recording and browsing one video per record chapter we have introduced two ways of recording videos, directly with the out of the box VideoRecord component or via a custom Lightning component that wraps the standard recording one. For simplicity, in this chapter we will present just the latter option, adding a Lightning Action to the Opportunity details page.

Go ahead and open the Developer Console:

In the new window containing the Developer Console, again select File > New > Lightning Component, and type "OpportunityVideoRecordAction" as name for the new Lightning Component.

Please copy and paste the following code in the Component section:

<aura:component implements="force:hasRecordId,force:lightningQuickActionWithoutHeader" >
    <aura:attribute name="recordId" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	<aura:handler event="nativevideo:VideoRecordingEvent" action="{!c.handleVideoRecordingEvent}"/>
    <div aura:id="recordingOpportunityCnt" style="width:100%;height:100%;"/>
</aura:component>

As you can see, there is practically no difference with the one seen in the Recording and browsing one video per record chapter, with the exception of the id of the DIV that is going to host the VideoRecord component instance.

Let's then move to the Controller of the component, where we'd expect to configure different parameters for the VideoRecord component, instructing it to point to the default junction object and specifically to the Opportunity lookup that we created in the previous step:

({
	doInit : function(component, event, helper) {
        var runningId = component.get('v.recordId');
		$A.createComponent(
			"nativevideo:VideoRecord",
			{
				"aura:id": "recordingOpportunity",
                "createJunctionWithObject" : "Opportunity",
                "createJunctionParentField" : "Opportunity__c",
                "createJunctionWithParentID" : runningId,
                "videoApprovedOrigin" : "https://" + window.location.host
            },
			function(newComponent, status, errorMessage) {
				if (status === "SUCCESS") {
					component.find("recordingOpportunityCnt").set("v.body", newComponent);
				} else if (status === "INCOMPLETE") {
					console.log("No response from server or client is offline.");
				} else if (status === "ERROR") {
					console.log("Error: " + errorMessage);
				}
			}
		);
	},
    
    handleVideoRecordingEvent : function(component, event) {
        if(event != null && event.getParam('eventType') === 'video_approved') {
            $A.get("e.force:closeQuickAction").fire();
			$A.get('e.force:refreshView').fire();
        }
    }
})

As you can see, the biggest difference compared to the one-to-one scenario described in the previous chapter are the parameters passed to the VideoRecord component, in particular:

• "createJunctionWithObject" as a reference to the API name of the parent object
• "createJunctionParentField" as a reference to the API name of the lookup field on the selected junction object
• "createJunctionWithParentID", dynamically populated with the Salesforce ID of the parent record, an opportunity record in our example

Also, no reference has been made to the video junction object and its default video lookup field, because we have leveraged the out of the box and default conditions. In case you want to use a custom junction object, you will have to specify further parameters to override the default values - no big deal.

The controller is also listening for the approval event, where the popup displayed by the Lightning Action is then closed.

Once the new Lightning Component has been created and saved, close the Developer Console, open the Object Manager in the Setup panel and select the Opportunity object. Then, move to the Buttons, Links, and Actions section and click on the New Action button. Similarly to the Lightning Action created in the previous chapter, specify the following values:

• Action Type as "Lightning Component"
• Lightning Component as "c:OpportunityVideoRecordAction": this is the name of the Lightning Component that we have just created
• Height as "355px"
• Label as "Record Video": this is the label displayed in the button

Once the Lightning Action has been saved, move to the Page Layouts section and click on the page layout entry you see on the screen. As per the previous chapter, locate the Salesforce Mobile and Lightning Experience Actions section in the page layout and click on the override the predefined actions link to enable you to edit the actions. Remove the un-necessary ones and drag the one we have just created, named Record Video and available under the Mobile & Lightning Actions menu on the top of the page builder.

Save and exit the setup panel, navigating to the details page of an opportunity record. The header of the page will now display a new action, named Record Video, and if you click on this new button, a popup with the VideoRecord component will appear in the midlle of the screen:

The video recording functionality is now available on the Opportunity object, and for each recorded video a new record of the Video Junction object will be created, mapping the new Video record with the Opportunity parent. Let's now allow users to play the recorded videos, this time via point & click.

3. Multiple videos played for each record

From the details page of an opportunity, click on the Setup Gear icon on the top right of the page and select Edit Page: the Lightning App Builder will appear.

Locate the VideoList component in the library displayed on the left hand side and drag it on the screen, for example on the right column of the builder. Configure the following parameters:

• Parent Object as "Opportunity"
• Filter By Field as "Opportunity__c"
• Filter By Value as "recordId"
• Optionally, tick Hide the Footer 

These parameters will be sufficient for the VideoList component to render all videos referenced by the junctions that are pointing to the currrent Opportunity record. It is possible to narrow down the list of videos displayed, configuring two further parameters (Filter by Where condition Field and Value).

The component will finally display all of the matching videos through a carousel interface, as presented in the following screen:

Conclusion & Next Steps

In this chapter we have described how multiple videos can be recorded and browsed against the same parent record, leveraging the out of the box VideoList component for playbacks and a custom Lightning Action wrapping the VideoRecord component for the recording.

In the next chapter we will introduce the video interview, a new functionality that can be optionally configured for the video recording. We will be creating a questionnaire to test our users via NativeVideo. Next section here.