Breadcrumbs

SAP C4C - Quoting Module on Opportunity Page

This section describes how to create Pricefx mashup in SAP C4C and place it to the Opportunity page in SAP C4C.

  1. Go to Mashup Authoring.
image2021-3-3_8-39-30.png

2. Create HTML Mashup.

Depending on your user rights, you might need to use SAP Cloud Applications Studio.

This error:

image2021-3-3_8-40-37.png

might indicate missing permissions; Studio or a different account might be needed.
image2021-3-3_8-36-58.png

If that is the case, use SAP Cloud Application Studio > right click as shown in the screenshot > Create HTML Mashup.


image-20210304-100456.png

3. Select Port Binding: Opportunity Info.
image-20210304-100750.png

4. Insert the Mashup HTML code into HTML Code Editor. Pricefx will provide the Mashup HTML code to the customer before installation.
image-20210304-100836.png

5. Go to Opportunities and select any relevant Opportunity.

(The filter might need to be changed.)
image-20210304-101009.png

6. Start the Adaptation mode.
image-20210304-101152.png

7. Add a new tab.
image-20210303-111236.png

8. Enter name and title of the tab.
image-20210303-111340.png


9. Select the newly created tab (Opportunity Integration in this case).

Click the Edit icon.

Click the back arrow in the menu on the right
(to get one level up in hierarchy of the layout).
image-20210304-103112.png

10. Once on this level, click the back arrow again.
image-20210304-103212.png

11. Select: Add > Mashup.
image-20210304-103239.png

12. Select the desired mashup – check the on the left side (crucial).

Check the Full Width option.

Enter 100 in the Height field.

Click Apply.
image-20210303-113009.png

13. Go to the original item.
image-20210304-103413.png

14. Remove it.

Sometimes this seems to be deleted but after you click End Adaptation, it appears again. It is fine to check Hide and this item will not be displayed anymore.
image-20210304-103501.png

15. End Adaptation.
image-20210303-113733.png

15. You are have a working iFrame of the Pricefx application.
image-20210304-103946.png

Old Approach (Using Application Studio)

  1. Right click MashupAuthoring > Create HTML Mashup.
    2019-02-21_15-58-19_CopernicusIsolatedShell.png

  2. In Port Binding select opportunity.

    2019-02-21_16-00-10_chrome.png

  3. Add HTML code, save and close.

  4. Click Add new item, select Embedded Component and set the name at the bottom of the window.
    2019-02-21_16-04-35_CopernicusIsolatedShell.png

  5. Double click the newly created component to edit it.

    2019-02-21_16-04-55_CopernicusIsolatedShell.png

  6. Select the mashup from Configuration Explorer and use drag & drop to move it to the pane.

    2019-02-21_16-07-16_CopernicusIsolatedShell.png

  7. Save and activate the component.

  8. Open Repository Content > BYD_COD > SalesOnDemand > Opportunity > UI > COD_Opportunity_TI.
    2019-02-21_16-08-44_CopernicusIsolatedShell.png

  9. Switch to the Edit mode using the pencil icon.

    2019-02-21_16-12-06_CopernicusIsolatedShell.png

  10. Click the first item in the Extensibility Explorer (Undefined).

    2019-02-21_16-12-06_CopernicusIsolatedShell.png

  11. Click the Add View with embedded Component.

    2019-02-21_16-13-16_CopernicusIsolatedShell.png


    2019-02-21_16-13-50_CopernicusIsolatedShell.png

  12. Set the Tab Title, Embedded Component and Title.

    2019-02-21_16-15-18_CopernicusIsolatedShell.png

  13. Save and activate the COD_Opportunity_TI.

  14. The new tab should appear (refreshing or closing & opening might be needed).

    2019-02-21_16-17-41_CopernicusIsolatedShell.png

  15. Select Undefined again and Adjust Properties: set enabled = true for the embedded component.
    2019-02-21_16-30-44_CopernicusIsolatedShell.png

  16. Activate all items.

  17. Open the browser, log in using SSO and display the opportunity detail.

    2019-02-21_16-51-35_chrome.png

  18. Launch HTML5, go to the opportunity detail, adapt > Edit Master Layout and the mashup appears there. Then move the tab where needed and End Master Layout.

    2019-02-21_16-47-05_chrome.png