Skip to Content

Use Open Social in a SAP Cloud Platform HTML5 application to integrate YouTube

Previous

Use Open Social in a SAP Cloud Platform HTML5 application to integrate YouTube

By Marc Bell

Build and run a YouTube Open Social URL Gadget in a SAP Cloud Platform HTML5 application

You will learn

In this tutorial you will learn how to build and run a YouTube Open Social URL Gadget in a SAP Cloud Platform HTML5 application.

Details


Step 1: Download the YouTube OpenSocial URL Gadget Sample Code

Download and extract the YouTube OpenSocial URL Gadget for SAP Cloud Platform sample code.

  1. Download the gadget source code from our official SAP GitHub repository at:

    https://github.com/SAP/SAPJamSampleCode
    
  2. Extract the file.
Step 2: Create your HTML5 application on SAP Cloud Platform

Create your HTML5 application on SAP Cloud Platform to provide hosting for your gadget.

  1. Switch to your SAP Cloud Platform account.
  2. Click Applications > HTML5 Applications
  3. Click New Application.
  4. Enter youtubeurlgadget in the Application Name field.
  5. Click Save. Your HTML5 application is created.
  6. Click Versioning.
  7. Click Edit Online. The Clone Git Repository dialog box appears.
  8. Click Clone. The Git Ignore System Files dialog box appears.
  9. Click Commit and Push.

Your HTML5 application is now ready to use.

Step 3: Upload sample code files to your HTML5 application

Upload the gadget (url.\*) and Cloud Platform application descriptor (neo-app.json) so they can be hosted by your HTML5 application.

  1. Select the youtubeurlgadget folder.
  2. Select File > Import > From File System. The Import dialog box appears.
  3. Click Browse.
  4. Go to the \OpenSocial\Gadget\youtubeurlgadget folder in your local repository.
  5. Double click neo-app.json.
  6. Click OK.
  7. Select File > Import > From File System.
  8. Click Browse.
  9. Double click url.html.
  10. Click OK.
  11. Select File > Import > From File System.
  12. Click Browse.
  13. Double click url.xml.
  14. Click OK.
Step 4: Publish your HTML5 Application

Publish your HTML5 application to provide a publicly accessible URL that integrates with SAP Jam Collaboration.

  1. Right-click your youtubeurlgadget and select Deploy > Deploy to SAP Cloud Platform. The Deploy Application to SAP Cloud Platform dialog box appears.
  2. Click Deploy. The Successfully Deployed dialog box appears.
  3. Click Open the application’s page in the SAP Cloud Platform cockpit. A SAP Cloud Platform tab appears.
  4. Click the Application URL link. The error message, HTTP Status 404 - Resource not found appears in a new tab.
  5. Replace ?hc_reset with url.xml at the end of the URL. Your URL should appear as follows:

    https://youtubeurlgadget-{YOUR_CLOUD_PLATFORM_ID}.dispatcher.hanatrial.ondemand.com/url.xml
    
  6. Reload the page with this new URL. The contents of the XML gadget appears.
  7. Copy the gadget URL.
Step 5: Use your gadget in SAP Jam Collaboration

Use your gadget in a group in SAP Jam Collaboration.

  1. Register the URL of the url.xml file with SAP Jam Collaboration.
  2. Create a group in SAP Jam Collaboration.
  3. Add this gadget to your group.

You should now see the gadget in your group. Try using the gadget, add comments, send notifications, and collaborate!

Feel free to modify, upload, and run this source code as much as you like. For more information about Open Social gadgets please refer to the Open Social Gadgets section of the SAP Jam Collaboration Developer Guide.


Next Steps

Updated 11/08/2017

Time to Complete

15 Min

Intermediate

Tags

Next Steps

Next
Back to top

Call me now