SFC Card plugin extension in SAP Digital Manufacturing

[ManoelCosta]

Introduction

SAP Digital Manufacturing provides several extension capabilities out of the box, including low code / no code options for citizen developers, extensive pro code options for pro developers and much more.

This is the second blog post of a series, where I cover how to extend standard / core POD Plugins leveraging digital-manufacturing-extension-samples provided by SAP.

In this blog, I will cover how to add a new button calling an API to SFC Card POD Plugin.

Prerequisites

• Check the first blog post of this series at Standard POD Plugin extensions in SAP Digital Manufacturing, where you will learn the basics needed to build and deploy any core POD Plugin extension, including how to provision SAP Business Application Studio, create a new 'Dev Space', close the sample git repository, adjust CORS, build and deploy your extension and much more. I highly encourage you to go throught it before trying anything from this post.

Build it

Open SAP Business Application Studio from your SAP BTP Cockpit, and open an existing or create a brand new 'Dev Space'. Clone digital-manufacturing-extension-samples repository from Github if you still didn´t have cloned it, and adjust CORS to include your tenant info, if you still haven´t done it yet.

For all the activities above, please refer to Standard POD Plugin extensions in SAP Digital Manufacturing for detailed instructions.

Navigate to /home/user/projects/digital-manufacturing-extension-samples/dm-coreplugin-extensions/ folder:

And from the EXPLORER view, expand dm-coreplugin-extensions > plugins > webapp > sfcCardExtensionProvider path and open SfcCardUtility.js, where you can already find in this example an extra field called 'Supplier' and an extra button called 'Help' with the respective called method being defined and added to SFC Card:

If you don´t change anything and carry on, a "Help" button will be added to the SFC Card, which when clicked, shows a "Custom Help button pressed" toast message, and a new field called "Supplier" will be added to SFC Card, but it´s content relies on another extension from the Github package, that I don´t cover here, therefore "Supplier" field would be blank.

In my case, I´m changing the sample onHelpPress: function, to call sfc/v1/sfcdetail API and retrieve the SFC Routing information, parse and show it via toast message instead of the example hardcoded message, just as an example of how you can call an API, parse and show it´s results. See below:

Please keep in mind that, for educational purposes, in this blog post I´m covering very simple examples and extensions, but the very same steps and principles can be used for further extensions and more complex use cases.

Also already available in this example, you will find in PropertyEditorExtension.js that extra properties are defined:

which show up in Configuration panel of POD Designer for SFC Card plugin:

which are then retrieved in LifecycleExtension.js during onAfterRendering and sent as input to loadHeaderInformation:

in SfcCardUtility.js, which will consider then accordingly:

Enable it

Extensions can be enabled for specific POD Plugins, Plants and PODs, enabling flexibility and scalability.

To enable an extension, navigate to dm-coreplugin-extensions > plugins > webapp > designer path and open components.json file to declare the desired POD(s) and Plant(s) where each specific extension should be enabled for. Example:

And that´s it! The POD Plugin extension is ready to be deployed.

Deploy it

To deploy it, please refer to Standard POD Plugin extensions in SAP Digital Manufacturing for detailed instructions.

Enable it

To enable it, please refer to Standard POD Plugin extensions in SAP Digital Manufacturing for detailed instructions.

Consume it

Once the 'UI Extension' is created, you can open the very specific POD at the very specific Plant for which you previously enabled the extension for at components.json file, where you should be able to notice three important things:

1. In the POD top right corner, you should see a purple icon, meaning that extensions are active for this POD.
2. In the SFC Card, you should see the new 'Help' button and the blank 'Supplier' field.
3. In Developer Console > Sources tab, if you scroll down to the bottom, you should be able to see your plugin extension is properly loaded and available.

If you don´t see all of these, please go back and review your whole setup.

You can now give it a try, select an SFC first and click 'Help' button, which should call sfcDetails API to retrieve SFC information and show the routing as a toast message as follows:

Please keep in mind that, for educational purposes, in this blog post I´m covering very simple examples and extensions, but the very same steps and principles can be used for further extensions and more complex use cases.

Where to go from here?

To learn more about Standard POD Plugin extensions, please refer to the following sources:

• SAP Help, Develop tab.
• SAP-samples / digital-manufacturing-extension-samples Github, especially to documentation/jsdocs.

Do you like this post? Please leave a 'Kudos'! Thanks,

Hope it helps,
Manoel