Supply Chain Management Blog Posts by SAP
Expand your SAP SCM knowledge and stay informed about supply chain management technology and solutions with blog posts by SAP. Follow and stay connected.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Read only

Standard POD Plugin extensions in SAP Digital Manufacturing

ManoelCosta
Product and Topic Expert
Product and Topic Expert
‎2024 Jun 14 6:02 PM
5,398

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.

In this blog post, I will guide you through a very specific extension scenario, covering the end-to-end process flow of how to develop a simple pro code extension to the standard 'Assemble Components' POD Plugin, which should be enough to set a strong basis and enable you to extend other core POD Plugins further to address your own plugin extension use cases and other more complex requirements.

Prerequisites

Build it

Open SAP Business Application Studio from your SAP BTP Cockpit.

ManoelCosta_0-1718367936544.png

If you don´t have a SAP Business Application Studio subscription available, see: Set Up SAP Business Application Studio for Development.

Open an existing or create a brand new 'Dev Space'.

ManoelCosta_1-1718367987785.png

ManoelCosta_2-1718368009677.png

ManoelCosta_4-1718368052748.png

Open digital-manufacturing-extension-samples Github, click '<> Code' and copy the web URL from HTTPS tab.

ManoelCosta_5-1718368104035.png

Back to SAP Business Application Studio, open a 'Dev Space' (make sure it is in RUNNING state), click 'Clone from Git', paste the web URL that was copied from Github in the previous step and hit 'Enter'.

ManoelCosta_7-1718368264193.png

The git repository will be cloned, and once completed, can be opened.

ManoelCosta_8-1718368328529.pngManoelCosta_9-1718368339562.png

To prevent Cross-Origin Resource Sharing (CORS) issues, from the EXPLORER view, open mta.yaml file and replace '<DM_HOST>' with your own SAP Digital Manufacturing tenant host in Line #15.

ManoelCosta_0-1718368428400.png

For example, if your SAP Digital Manufacturing tenant url is: "https://XXXXXXX.execution.eu20.dmc.cloud.sap/cp.portal/site#Shell-home", replace '<DM_HOST>' with "XXXXXXX.execution.eu20.dmc.cloud.sap" only.

Back to the EXPLORER view, expand dm-coreplugin-extensions > plugins > webapp > assemblyPointExtensionProvider path and open PluginEventExtension.js, where you can find the events that can be extended for the 'Assemble Components' POD Plugin.

ManoelCosta_0-1718369725227.png

Feel free to browse around the other folders for the other plugins, and get familiar with them as well.

In this blog post, I will extend 'ON_ADD_PRESS_EVENT' event from Line #28 above, which is triggered once workers press the 'Add' button in the 'Assemble Components' POD Plugin during Component Assembly steps in Work Center and Operation Activity PODs.

Note that ON_ADD_PRESS_EVENT event returns OverrideExecution.After:

            } else if (sOverrideMember === PluginEventConstants.ON_ADD_PRESS_EVENT) {
                return OverrideExecution.After;
            }
 
Here, you can use:
  • Before: Where your extension is appended before the standard execution flow.
  • After: Where your extension is appended after the standard execution flow.
  • Instead: Where your extension is executed instead of the standard execution flow.

To extend ON_ADD_PRESS_EVENT event, onAddPress function must be extended, which for educational purposes, I extended with a very simple showSuccessMessage() call:

ManoelCosta_1-1718370128692.png

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:

ManoelCosta_0-1718382592397.png

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

Deploy it

To deploy the extension, navigate to and right-click mta.yaml file from the EXPLORER view, and select 'Build MTA Project'.

ManoelCosta_3-1718370355507.png

Once the build is complete, expand 'mta_archives' folder to find the recently created .mtar build file, right-click it and select 'Deploy MTA Archive'.

ManoelCosta_4-1718370455485.png

When doing it for the 1st time only, Sign In to SAP BTP Subaccount Cloud Foundry Environment and select a Target.

ManoelCosta_5-1718370531349.png

The Cloud Foundry Endpoint information comes from the SAP BTP Cockpit, see below, and authentication can be done via Credentials or SSO Passcode as you wish.

ManoelCosta_7-1718370614346.png

Once Cloud Foundry Sign In is done, select a Cloud Fountry Target, meaning the Organization and Space where the extension will be deployed to, and click 'Apply'.

ManoelCosta_8-1718370673200.png

The extension will now be deployed to the SAP BTP Subaccount Cloud Foundry Environment, which might take a few minutes, hang tight.

ManoelCosta_0-1718370862562.png

Once completed, you can navigate to the respective SAP BTP Cockpit and check the selected Cloud Foundry Target Space:

ManoelCosta_1-1718370957627.png

To find the application deployment as 'Started':

ManoelCosta_0-1718383494373.png

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

Enable it

Once deployed, the extension must be enabled in in SAP Digital Manufacturing Service Registry.

To do so, open Manage Service Registry app, select 'UI Extensions' and click 'Create':

ManoelCosta_0-1718371085261.png

Enter the 'UI Extension' info accordingly, as shown below.

ManoelCosta_1-1718371106647.png

Where:

  • Name: Anything
  • Description: Anything
  • Type: 'POD Plugin'
  • URL: Shows up in SAP Business Application Studio right after the deployment is completed, see below: ManoelCosta_2-1718371227218.png
  • Path: Is defined in xs-app.json as 'source', see below: ManoelCosta_3-1718371281660.png
  • Namespace: Is defined, for example, in PluginEventExtension.js file (replace "." by "/")ManoelCosta_4-1718371324139.png
  • Status: Check as Enabled.

and click 'Create' to create it.

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 two important things:

ManoelCosta_5-1718371550648.png

  1. In the POD top right corner, you should see a purple icon, meaning that extensions are active for this POD.
  2. 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 both of these, please go back and review your whole setup.

Proceed as normal and navigate to 'Assemble Components' plugin, which was extended in this example, to give it a try.

ManoelCosta_0-1718371761402.png

And, as soon as 'Add' button is clicked, you should see the extension being triggered.

ManoelCosta_1-1718371912309.png

Please keep in mind that, for educational purposes, in this blog post I covered a very simple extension to the 'Assembly Components' POD Plugin, but these 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:

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

Hope it helps,
Manoel

1 Comment