Mashup

Posted on Posted in SAP Business ByDesign

Save this article as PDF?

What is Mashup?

Mashups is an easiest way to integrate external systems in Cloud Solutions.

Mashups are used to integrate data from SAP’s cloud solution with data provided by an online Web service or application. Users can access the content provided by these Web services and applications. For Example, Mashups can include Web searches, company or industry business information, or online map searches. Before starting the mashup, you should have some basic knowledge in web development.

I will take a simple example but will try to use a complex scenario so that you all will know in and out of mashup and how it works.


Creating Mashups

  1. Using the studio, we can create mashups for an SAP cloud solution.
  2. Add the Mashup to a Floorplan
    • Add a Mashup to an SAP Floorplan.
    • Add a Mashup to Your Floorplan that you have designed.

There are four different mashup types:

URL Mashup
  1. A mashup that sends data from SAP’s cloud solution to the URL of an online service provider.
  2. The service provider uses the data, for example, to perform a search, and the results are displayed in a new browser window.
HTML Mashups
  1. A mashup that embeds an HTML or JavaScript based Web page directly on a screen.
Data Mashups
  1. A mashup combines and displays data from both internal and external sources.
  2. To create a data mashup, an integrated authoring tool is used to transform or merge external Web services with internal business data using industry-standard Web service protocols.
Custom Mashups
  1. A mashup that has been created as an add-on solution by SAP.

You can create new data, URL, and HTML mashups. Custom mashups can be created only by SAP.


Save this article as PDF?


Process Flow to create Custom Mashup

We will discuss process flow steps one by one with an example.

  1. Prerequisites
  2. Create Business Object
  3. Create a PTP Package
  4. Create a Mashup Port Binding
  5. Create an URL / HTML Mashup
  6. Adding mashup in Custom screen
  7. Assign this Mashup to Business user
  8. Testing
  9. Troubleshooting

Step 1: Prerequisites

  1. Login into the SDK. Select your solution from “My Solution” window.
  2. You must enable the admin mode for the solution in which you create the mashup to ensure that the system saves your content and any changes you make in the solution. To enable, open your solution in SDK and select Administration -> Switch On/Off Admin Mode in SAP Solution.

1. prerequesties


Step 2: Create Business Object

  1. Create a custom Business Object Mashup.
  2. Define two elements as shown in the below screenshot.
  3. Save and Activate.

For more information about the Custom Business Object creation, see http://blog.sankaranss.com/2016/03/29/sap-byd-business-object/.

2. Bo Structure


Step 3: Create a PTP Package

If the mashup is going to return data that is entered automatically into the cloud solution, then you need to create a port type package for the mashup.

Procedure to create PTP Package:

  1. Create screens for the Custom BO.

For more information about the Screen creation, see http://blog.sankaranss.com/2016/04/28/sap-byd-screen-types/

  1. In the Solution Explorer, right-click the project folder and select Add New Item.
  2. The Add New Item dialog box opens.
  3. Select Port Type Package.
  4. In the Name field, enter a name for the port type package. Select Port Type Package.
  5. Click Add.3. ptp
  6. The Select Business Object dialog box opens. You choose your Bo name (for example, mashup) and click Ok.3.ptp namespace

The port type package is added to your project. Your solution should look something like in the below screenshot.

4.look

 

  1. Double-click the port type package.

The port type package opens in the user interface designer.

  1. Create the required structure depends on our requirement, as follows:
    • To add a port type, select the root node and then click +.
    • To add a parameter, right click on the port type and choose Add Parameter. As per our requirement, add two parameters and rename it as FirstName and LastName.

3. ptp in design

  1. Save and activate your changes.

Step 4: Create a Mashup Port Binding

Certain fields on screens are predefined as screen out-ports and in-ports. These screen out-ports and inports are grouped together as a port binding.

The port binding defines the type of information that can be used in the mashup and defines on which screens you can use the mashup. The mashup category specifies which port bindings are available. However, you can also create your own port bindings for your solutions, if required.

Procedure to create a Mashup Port Binding:
  1. Create a Mashup Port Binding. Add -> New -> Mashup Port Binding. Enter a name for the port binding and click Add.5. Port Binding
  2. You can see your port binding package under Mashup Configuration.6. look

 

  1. Right-click the port binding, and choose Open.

The UI designer opens, displaying a dialog box that contains the name of the port binding in the title.

Set all fields like…

  1. Description
  2. Category (of your choice)
  3. Choose Inport Type Package which you’ve created in Create a PTP Package step 4.
  4. Inport Type Reference as Input (you have mentioned this name when creating the port type package) and leave the rest blank.
  5. Save and activate your changes.

7. portbinding look


Step 5: Create an URL / HTML Mashup

Depends on your requirement, you can create either URL or HTML mashup. Here you can learn both URL and HRML Mashup creation.

5.1 Create an URL Mashup
  1. Create an URL Mashup as shown below.8. URL Mashup
  2. If any window pops up asking you to turn ON Admin Mode, click “Yes”. Doing so, you are making this mashup as a part of your solution.

9. Error

  1. QAF Builder pops up asking you to enter details of URL Mashup.
    • Select the same category which you used in step 4.
    • In the OVS of Port Binding, you will now be able to see your PTP Package. Select it.
    • Type in some name and Description (optional).
    • Enter the “URL” of the external application. For your reference here I have attached some simple URL. I will keep this URL open.
    • HTTP Method: GET / POST
    • In the table below URL Information section, click “Add” twice and Enter first and last as URL parameter and click on Parameter Binding OVS. You should now be able to see the parameters you created in Step 3 as shown in below screenshot.10. url mashup screen
    • Select FirstName in first URL Parameter and LastName in last URL Parameter.
    • Click the Preview link to display the end result of the mashup.
    • Save and Close.

Finally, Your URL Mashup looks like as shown in below screenshot.

10. url mashup final

5.2  Create an HTML Mashup
  1. Create an HTML Mashup as shown below.11. HTML Mashup
  2. QAF Builder pops up asking you to enter details of HTML Mashup.Create an HTML Mashup as shown below.
    • Select the same category which you used in step 4.
    • In the OVS of Port Binding, you will now be able to see your PTP Package. Select it.
    • Type in some name and Description (optional).
    • Depending on what you have selected, do one of the following:
      1. Enter a URL
        1. Choose the type as a URL and then enter the custom URL. For your reference here I have attached some simple URL. I will keep this URL open.
        2. Click the Preview link to display the end result of the mashup.
      2. Enter HTML Code
        1. In the HTML Code Editor, you can copy or enter your own HTML code. In the later article, we will clearly see about HTML Code, which is used in Mashup.
        2. Click Save and Close.

 Finally, Your HTML Mashup looks like as shown in below screenshot.
11. htmls mashup final


Step 6: Adding mashup in Custom screen / SAP Screen

Now our Mashup is ready, let us proceed with adding it on SAP/ Custom screen. In step 5, we created both URL and HTML mashup. Here we going to learn how to add that mashup in SAP / Custom Screen.

6.1 Adding URL Mashup in Custom Screen
  1. Open our Custom BO’s QA screen.
  2. Create an anchor for floorplan as shown in the below screenshot.12. url outport
  1. We need the screen to communicate with Mashup which is the prime reason to create URL Mashup with parameters. So, we need a way to send out data from our BO instance to Mashup. For this, we need an outport to be configured as shown in the below screenshot.
    • Select the same PTP Package which you created in Step 3
    • Bind the parameters of your data model structure.13. url outport 2
    • We need to create an anchor for Outport by selecting Anchor from its Extensibility properties. Outport now has an identity of its own.
    • You can now refer floorplan anchor created in the previous point in the Referenced Anchors section so that Outport knows where to populate data.Extensibility -> Referenced Anchors -> (Click three dot) -> In Anchors Modelling click + button -> Refer floorplan anchor created in the previous point14. url outport 3
  2. Save and Close.
6.2 Adding HTML Mashup in Custom Screen
  1. We are going to add simple search HTML Mashup without any outport / Inport. In the later article we will clearly see about this topic.
  2. Configuration Explorer -> Your_Project_MAIN -> Src -> <Your Project Folder> -> Massup -> Pipe -> (here you can see all your URL / HTML / Data Mashup) -> Choose your Mashup -> Drag and Drop your HTML Mashup into the Screen.14. html mashu drag n frop
6.3 Adding HTML Mashup in SAP Screen
  1. Log in as a business user and navigate to SAP Floorplan. For example, Sales Order QA screen
  2. Click on “Adapt” and then on “Enter Adaptation Mode” on the top contextual menu and then on “Edit Screen” from the same menu.
  3. Click on “Mashups and Web Services”. You should be able to see your Mashup in the list as shown in the below screenshot. Enable it and Leave the Adaptation mode.17. html std screen

Step 7: Assign this Mashup to Business user

  1. Log in as a business user and navigate to the QA Screen by creating a custom BO instance or SAP Floorplan.
  2. Click on “Adapt” and then on “Enter Adaptation Mode” on the top contextual menu and then on “Edit Screen” from the same menu.
  3. Click on “Mashups and Web Services”. You should be able to see your Mashup in the list as shown in the below screenshot.
  4. Save and Publish the changes. Leave Adaptation Mode.

Add URL Mashup in Custom Screen.

16.url assign

Add HTML Mashup in SAP Screen (Sales Order Screen).

17. html std screen - Mashup sap cloud application studio


Step 8: Testing

8.1 Test URL Mashup
  1. Log in as a business user.
  2. Navigate to the QA Screen by creating a custom BO instance.
  3. You should now be able to see a new button “Web Services”.
  4. Enter the value and click the Webservice button. It will navigate to the custom page with the value you have entered in QA Screen.

 

URL Mashup in Custom Screen (The first and two field value passed to the third party software):

test result Mashup sap cloud application studio

8.2 Test HTML Mashup
  1. Log in as a business user.
  2. Navigate to the QA Screen by creating a custom BO instance or SAP Floorplan.

Ex : 1.HTML Mashup in custom Screen(Search Engine in custom screen itself):

html test Mashup sap cloud application studio Mashup sap cloud application studio

Ex : 2.HTML Mashup in SAP Screen (Sales Order – Enable calculator in Sales Order Screen):

sales order - Mashup sap cloud application studio


Step 9: Troubleshooting
  1. For URL Mashups, make sure that you disable popup blocker.
  2. SAP Cloud sites run on https but when you try to bring in mashups which fetch content from HTTP, they will be blocked by browsers. You can notice small popup by browsers indicating that they blocked some content from being displayed. In this case, you should enable MixedMode for browsers.If you see below error message in your case, please make sure to click No.15.html block Mashup sap cloud application studio

we have seen about mashup, and in the future article, we will learn more about it. Don’t forget to subscribe and leave your comments.

If need to download this article as pdf?

12 thoughts on “Mashup

  1. I was excited to uncover this web site. I need to to thank you for ones time for this fantastic read!! I definitely appreciated every little bit of it and I have you bookmarked to see new information on your site.|

  2. I see your page needs some fresh & unique content.
    Writing manually is time consuming, but there is solution for this hard task.
    Just search for; Miftolo’s tools rewriter

  3. It’s the best time to make some plans for the future and it’s time to be
    happy. I’ve read this post and if I could I want to suggest
    you few interesting things or suggestions. Maybe you could write next articles referring to
    this article. I want to read more things about it!

  4. Sweet blog! I found it while searching on Yahoo News. Do you have any tips on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there!
    Thanks

  5. I’m extremely pleased to find this web site. I need to to thank you for
    ones time due to this wonderful read!! I definitely loved every little bit of it and i also have you saved
    to fav to look at new stuff on your website.

  6. I’ve been surfing online more than 3 hours today,
    yet I never found any interesting article like yours. It is pretty
    worth enough for me. In my view, if all site owners and bloggers made good content as you did, the web will
    be a lot more useful than ever before.

  7. Having read this I believed it was very informative.

    I appreciate you spending some time and effort to put this content together.
    I once again find myself personally spending a significant amount
    of time both reading and posting comments. But so what, it was still
    worthwhile!

Leave a Reply

Your email address will not be published. Required fields are marked *