Overview

Prerequisites

Procedure

1. Add a link to your floorplan.

   1. In the studio, in the Solution Explorer, right–click your floorplan and select Open in UI Designer.

      The UI designer opens.

   2. Go to the Toolbox tab.

      If the Toolbox tab is not visible, make it visible by going to   View   Toolbox  End of the note

   3. In the Controls section, drag and drop Link to the floorplan.

      The Link element is displayed on the floorplan. It contains a Link field and a Link hyperlink.

   4. You can rename the text of the Link field. To do this, ensure that the Link element is selected.

   5. On the Properties tab, under Text Information, click on the dropdown arrow in the Label field.

   6. In the dialog box, enter the required text, and click OK.

      The renaming of the hyperlink will be described later on in this document.

2. Add your mashup.

   1. In the UI designer, go to the Controller tab of the floorplan.

   2. Right-click on Mashup Components, and select Add Mashup Component from the dropdown list.

   3. In the dialog box, go to the main folder of your solution and the folder where the mashups are stored.

      This name starts with   MAIN_<Solution Name>  SRC  Mashups  Pipes  <Pipe ID>  End of the note

   4. Select your mashup as follows.

      • A URL mashup that is displayed in a new window

      • A data mashup that writes data back into the solution

   5. Click OK

      The mashup is displayed on the Controller tab underneath Mashup Components.

3. Add an event.

   1. In the UI designer, on the Designer tab, select the Link element in the floorplan.

   2. On the Properties tab, under Data Information, select EventArguments and click ...

   3. Click the Add Argument button.

      A new event argument is added.

   4. Under ArgumentName, rename the event argument to $MashupPipeID.

      We recommend that you copy the name $MashupPipeID from this document and paste it in the ArgumentName field. >>> MISSING TARGET TEXT FOR TEXT-ID: 'XTXT_a11y_TipEnd' <<<

   5. Leave the dialog box open, and go to the .

   6. In the , on the Solution Explorer tab, under   MashupConfiguration  Mashup Authoring , select the mashup.

   7. On the Properties tab, copy the value in the Repository field. This value has the format MAIN_Solution Name>/<Pipe ID>.

   8. Go back to the open dialog box in the UI designer, paste the value of the Repository field under Constant, and click OK.

   9. Save your changes.

4. Create a new outport.

   1. On the Controller tab, right-click Outports.and choose Add Outport.

      The new outport is displayed under Outports.

   2. Right-click the outport and select Rename; then enter a new name for the outport.

5. Select a port type package for the outport.

   1. In the Port Type Package field, click ...

   2. In the dialog box, go to   SAP_BYD_TF  Mashups , choose globalmashupporttypes, and click OK.

6. Configure a port type reference for the outport.

   1. In the Port Type Reference field, select a port type reference from the dropdown list.

   2. If there are parameters displayed in the table below, you can bind them. To do this, click ... next to Parameter Binding.

      If you do not bind the parameters, you will not be able to pass the values from the floorplan to the mashup. End of the note

   3. In the dialog box, choose the required element of the business object and click OK.

7. Create an event handler.

   1. On the Controller tab, right-click Event Handlers and select Add EventHandler..

      The new event handler is displayed under Event Handlers.

   2. Right-click the new event handler and select Rename; then enter a new name for the event handler, for example, MashupHandler.

   3. Under EventHandler Operations, click the Add Operation button twice to add two new operations.

   4. For each operation, under Type, click in the field and select the following operation types:

      • SyncDataContainer

      • FireOutport

   5. Under Name, you can change the names of these operation types

   6. For FireOutport, under Configure the operation, choose the outport that you created previously.

   7. Save and activate your changes.

8. Specify the navigation for the mashup.

   1. On the Controller tab, under Mashup Components, select the mashup.

   2. Go to the Simple Navigation tab.

   3. In the Navigations folder, right-click and select Add Navigation from the context menu.

      The Navigation Details tab opens.

   4. Select the outport and the inport from the dropdown lists.

      The source is the outport of your floorplan; the target is the inport of the mashup category. End of the note

   5. To map the outport and inport parameters from the floorplan to the mashup, select these, and click Bind.

      The results are displayed in the table below.

   6. Save and activate your changes.

9. Assign the event handler to the mashup in your floorplan

   1. Go to the Designer tab.

   2. Select the Link element in the floorplan.

   3. On the Properties tab, under Events, select OnClick, and select the event handler that you created previously from the dropdown list.

10. Add a data field to your business object.

    1. Go to the Data Model tab.

    2. Right-click on your business object, and select Add Data Field from the context menu.

       The data field is added to your business object.

    3. Select DataField.

    4. On the Properties tab, under Design, enter a text for Initial Value.

       This text is used for the hyperlink that is displayed on the floorplan.

       This text is not displayed in the floorplan in the UI designer, but you will see it when you test the mashup. End of the note

11. Assign the data field to the mashup on your floorplan

    1. Go to the Designer tab.

    2. Select the Link element.

    3. In the Properties tab, under Data Information, click the dropdown arrow next to Text.

    4. In the dialog box, go to the Data Model tab.

    5. Select DataField underneath your business object, and click OK.

12. Save and activate your changes.

Result

See Also

Add a Mashup to Your Floorplan

Mashups Quick Guide