Recording and browsing one video per record

In this section, we will introduce how to offer video recording and browsing capabilities associated in a one to one relationship to a given Salesforce object. Specifically, we will:

1. Introduce the Salesforce object that will be offering the video capabilities, adding a video lookup field
2. Include recording and browsing capabilities, without using any coding skills
3. Add a Lightning action to support the recording feature

Let's get started!

1. The target Salesforce object 

As introduced, in this chapter we will cover the scenario in which there is up to one video for each record of the selected Salesforce object.

For this tutorial, we are going to use a custom Salesforce object, that is currently serving our Org as a Frequently Asked Object, normally used to illustrate internal and external processes and knowledge. We will enrich the information provided by this object with a video that can be optionally recorded by our Salesforce super users and shared both internally and externally, via a Community.

Our object can be found in our demo Org, looking for "FAQ" in the object manager section in the Setup:

Moving to the "Fields & Relationships" section, we can see that this object is used to offer just textual information, such as the Question and the associated Answer, both as standard text fields:

Now that we are more familiar with this simple custom object, let's go ahead and add the lookup that will host the reference to a recorded video.

Click on the "New" button on the top right area of the previous screen, then select the "Lookup Relationship" option and finally go to "Video" entry in the picklist:

Then press the "Next" button again, specifying the preferred field name (e.g. "Video"), moving to the next section again selecting the desired profiles (e.g. all set to visible), optionally including the field in the FAQ page layout and again optionally the related list in the Video page layout. Finally click "Save" to finalise the creation of the new lookup field:

Now that our Salesforce object has been configured with the new video lookup field, let's move to the next section, where we will be editing the page layout adding the standard NativeVideo recording and browsing components.

2. Video recording and browsing, via point & click

From the details page of a FAQ record, click on the setup gear icon on the top right corner of the page, and then click on the "Edit Page" option:

The Lightning App Builder will then appear, and from this setup interface you can configure which components will be rendered on the details page of any FAQ record.

On the left hand side of the page, you can find the full library of Salesforce components available, and if you scroll to the bottom of this list, you can finally notice the NativeVideo entries, specifically the VideoRecord and the VideoList Lightning components:

Let's start adding the video recording capabilities: drag and drop the VideoRecord component, from the list on the left hand side to the desired position in the page, for instance above the activity component:

Once the component has been dropped, a list of configurable parameters will appear on the right hand side of the App Builder.

From this list, please specify the following fundamental parameters:

• "Update Object Name" with the FAQ__c value, to indicate that the recording component will update our target custom object
• "Update Record ID" with recordID , to suggest the component that the currently displayed record will be the one that has to be updated
• "Update Field" with Video__c , as the API name of the lookup field we have created at the previous step

Once these three parameters have been typed in, the browser will ask you to access camera and microphone, and as soon as they have been granted, you will see yourself on the App builder:

There are more parameters that can be configured (full reference available here), but for now we can just leave these fundamental ones in place.

Let's then add the video browsing functionality, this time to display the video recorded by the component we have just added. Find the VideoList component on the right hand side of the screen and drag it underneath the VideoRecord component. As with the previous step, please specify the following parameters:

• "Query Object" as the Salesforce object that is hosting the video lookup, so in our example type FAQ__c
• "Query Record ID", as the record that has to be fetched. Typing recordId our app will dynamically populate this parameter with the Salesforce ID of the current record
• "Select Video Field", as the API name of the lookup referencing the video record, so in our example type Video__c
• Optionally, tick the "Hide the footer" checkbox

Once these configurations have been specified, the VideoList component should display a "No video found" label, to indicate that no video reference has been found at the configured lookup field. This is perfectly normal at this stage, we have completed the configurations, but we haven't still recorded any video content on the current FAQ record.

Let's go ahead, save and activate the page from the two buttons on the top right corner of the page. Once you have pressed the "Back" button again on the top right corner of the screen, the App Builder will be closed and you will be redirected back to the details page of the FAQ record we were originally browsing... but this time you will be able to see both the VideoRecord and the VideoList components.

We are finally ready to record our first video: click on the "Record" button in the VideoRecord component, wait for the countdown and smile for the camera! Once your video message is finished, click on the "Stop" button. You can then immediately playback the video you have just recorded and decide if:

1. You want to retake it, therefore press the "Redo" button on the left
2. You are happy with the video, so then let the upload finish

Once the video has been fully uploaded and validated, just press the "Approve" button and then refresh the page to see the recorded video. You might see a dark overlay on your video thumbnail, saying that the video is processing... just wait few seconds and the overlay will disappear, allowing you to play the video message you have just recorded.

In just few clicks we have enhanced our Salesforce object, enabling us to offer a video answer to any question. There are more parameters you could configure, such as:

• Recording: main colour, messages, uploads of existing videos and more (full list of configurations available here)
• Browsing: main colour, hiding header / footer and embedding further content from custom VisualForce pages (full list of configurations available here)

Let's now replace the default recording component from the page with a button.

3. Recording via Lightning Action

The out of the box recording component simply displayed on the a page could be a bit overwhelming and it may not be necessary to view it all of the time, so let's replace it with a button on the header. We will discuss in this section all of the key steps to include a lightning action in the details page of the FAQ object.

Open again the Lightning App Builder and remove the VideoRecord component from the FAQ details page. Save and move back, opening the Developer Console from the menu bar displayed below:

The developer console will be presented in a new window and from its menu bar select File > New > Lightning Component. This new component will wrap the default VideoRecord component offered as part of the NativeVideo package, because it's not currently possible to specify dynamic parameters when creating a Lightning Action. Type "FAQVideoRecordAction" as Name of the new Lightning component and press Submit.

Specify the following code in the Component:

<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="recordingFAQCnt" style="width:100%;height:100%;"/>
</aura:component>

In this code, we are implementing:

• the force:hasRecordId interface to populate the current Salesforce record Id in the recordId attribute
• the force:lightningQuickActionWithoutHeader interface to be able to include this component as a Lightning Action

We are then adding two event handlers, to:

• execute a custom function once the component has been initialised
• listen for when the user will press the Approve button, once the video has been recorded and uploaded

Finally, the body of the component contains just an empty HTML DIV tag, that will host the VideoRecord component.

Let's move to the Controller of the new component, where you need to replace the default code with the following:

({
	doInit : function(component, event, helper) {
        var runningId = component.get('v.recordId');
		$A.createComponent(
			"nativevideo:VideoRecord",
			{
				"aura:id": "recordingFAQ",
                "updateObjectName" : "FAQ__c",
                "updateField" : "Video__c",
                "updateRecordID" : runningId,
                "videoApprovedOrigin" : "https://" + window.location.host
            },
			function(newComponent, status, errorMessage) {
				if (status === "SUCCESS") {
					component.find("recordingFAQCnt").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();
        }
    }
})

The code described in the doInit function is fetching the Salesforce ID of the record that has been browsed, so that recordingFAQCnt DIV can be populated with a dynamically created VideoRecord Lightning component. The parameters that have been passed are the same as the ones we have manually configured in the App Builder in the previous section, plus a couple of technical ones.

The function handleVideoRecordingEvent is executed when the user is clicking on the Approve button at the end of a recording experience, and it simply closes the popup associated to the Lightning Action.

Let's save both component and controller and close the Developer Console.

From the FAQ section in the Object Manager, select the Buttons, Links, and Actions entry and then click on the "New Action" button on the right hand side. Configure the new action as follows:

• Action Type as "Lightning Component"
• Lightning Component as "c:FAQVideoRecordAction": 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

Press Save and move to the Page Layout section on the left hand side menu, and then click on the "FAQ Layout" link to open the page layout. In the body section of the page layout, locate the Salesforce Mobile and Lightning Experience Actions section and click on the override the predefined actions link, so that all actions are editable on the layout. Remove the un-necessary actions and drag and drop the Record Video action you can find in the Mobile & Lightning Actions section above:

Save the page layout and return to the details page of an FAQ record, you will now notice a new button on the header of the page. Clicking on Record Video button a popup will appear, displaying the VideoRecord component. You can now record a new video and refresh the page to see it appear on the VideoList component.

Conclusion & Next Steps

We have discussed how to offer video recording and browsing capabilities with up to one video per Salesforce record, leveraging out of the box Lightning components and also adding a custom Lightning Action.

In the next chapter we will see how to offer the same functionalities, in a scenario in which there are more videos for each given Salesforce record. Next section here.