Building a custom Digital Manufacturing Cloud POD Plugin the easy way
Recently I started to experiment building Digital Manufacturing Cloud POD plugins and soon learned that it can be quite time consuming just to build the basic structure of the plugin without adding any functionality.
In my first plugin I created the file structure and files manually (with lots of copying and pasting from samples) which was a good learning experience but by no means efficient.
I then created a blank template from this first plugin and used that for several other plugins, this consisted of copying the template into Business Application Studio and manually making all the required changes. Not quite as time consuming as my first attempt but still prone to errors and still takes me around 30 minutes before I start adding real functionality.
So how could I do this quicker, easier and less error prone? I needed something that asked me a few questions about the plugin I wanted to develop then automatically create all the file structure and files. What came to mind was Yeoman which I had seen used on another type of project. So, after reviewing the Yeoman documentation I wrote a Yeoman generator to scaffold my plugins automatically.
So, lets build a custom POD plugin to see how easy it is using this Yeoman generator.
For this blog I am going to use Business Application Studio but you can also use Visual Studio Code if you prefer (you need to install the cloud foundry CLI and the MultiApps CLI if you want to use VS Code). You can use Business Application Studio in a trial account if you don’t have access to a licensed version.
Lets start by opening Business Application Studio.
If you do not already have a development space available then you need to press the “Create Dev Space” button. Give the Dev Space a name and select SAP Fiori as the kind of application you want to create.
Business Application Studio will now start to create the dev space and after some time it will display that the dev space is running. Click on the name of the dev space to open the dev space.
Once opened you should see the following.
We now need to create a folder to hold our POD plugin, there are several ways of doing this and everybody has there own preference. I prefer to click Terminal >> New Terminal and do it in the command line
I type :
Now you can press the open folder button and select the folder you just created.
OK, now we are ready to start creating the POD plugin and to make this really easy I have written and released a yeoman generator that does a lot of the work for you.
So first we have to install the generator (note that Yeoman is already installed in Business Application Studio), to do that open a terminal again and type the following command:
npm install generator-dmcpodplugin
Now the tool is installed we can let it do its magic by typing
The generator will ask multiple questions eg name of your plugin, namespace, host etc and then automatically creates all the files and folder structure required for the POD plugin and then installs all the dependencies.
The plugin is now ready for you to add whatever functionality you want it to have but I have included sample configuration in the plugin that allows to to package and deploy the plugin straight away, so lets do that.
We need to package everything into an MTAR file first so right click on the mta.yaml file and select Build MTA Project from the menu.
Once its has completed you should see an MTAR file with the same names as you plugin
This MTAR file can now be uploaded to BTP – Note you need the appropriate subscription and roles to be able to deploy this file.
Right click the MTAR file and select Deploy MTA Archive from the menu.
At the top of the screen you will be asked for details of where this plugin should be deployed such as username, password, tenant and space.
Once deployed you should see a message saying that it was started and available at a specific URL – take a note of this URL as you will need it.
This means that the POD Plugin is now hosted in BTP and is ready to be added to DMC using the Service Registry.
Open your DMC launch pad and open the Manage Service Registry app. Select the
UI Extensions tab and press Create
Add a name and description for the plugin, type should be POD Plugin, URL is the URL noted in the previous step with Https:// added to the front of it.
Path should be / followed by the name you gave to the podplugin so in my example it is /yeomanPlugin
Namespace is the namespace given in the yeoman questions but with the dots replaced by slashes and the name of the project added to it. In my example the namespace was sap.custom.plugins and the name of the plugin was yeomanPlugin so the entry would be sap/custom/plugins/yeomanPlugin
Check the Enabled checkbox and press Create
The POD Plugin is now available for use so lets try it.
Open the POD Designer app and select Create.
Give the POD a name and select one of the POD types you answered Yes to in the yeoman questions. Ive selected Operation Activity.
Drag a “Plugin Container” from the controls list into the middle of the page then find your plugin in the plugin list and drag it onto the Plugin Container. Click the default check box and press the configuration gear wheels in the top right hand corner of the screen.
Notice that the configuration panel shows the configuration defined in the builder/propertyEditor.js file .
Type in anything you want into the two text fields and press save.
Finally, press the glasses icon to open a preview of the POD.
You can now see the custom POD plugin where the text in the header bar and the text in the panel match whatever you defined in the configuration.
Congratulations, you have built a custom POD plugin.
Very useful blog. I have a question: this is a way for creating a new plugin. Is there a way for extending a standard plugin (like SFC card or others)?
We have discussed this via email but repeating here for the community.
At the moment the is no way to extend a standard POD plugin. At the moment you would have to build a custom POD plugin from scratch that does the same as the standard one.
We are discussing internally how to approach this in the future, we might release the source code of the plugins or we may change the design to allow them to be extended. Watch this space as they say.
Very good blog. Is there any way to test the plugin without deploying it? That is, running the plugin directly in BAS?
Hi Luis, thanks for your comments. At the moment the only way to test it is to deploy it, however I know the development team are working on a way to test it without deploying it so watch this space.
Thank you for this awesome explanation and the yo generator!
Are you planning to provide generators for the other types of UI Executions like "ExecutionPlugin"?
Thank you Matthias,
Yes I am planning to expand it to cover execution plugins as well but I am so busy on project work right now that I haven't had the time to do it yet.
In the meantime I found the github repo for it and maybe I can dedicate some time to help with the generator cause I already have some more usecases that can be achieved by extending the generator.
Which Role is required to deploy the "This MTAR file can now be uploaded to BTP – Note you need the appropriate subscription and roles to be able to deploy this file"
I can't the starting URL which I will add in Manage Service Registry on DMC.
Thanks and regards,
Im guessing you worked it out since I also see your next question.
For anyone else reading this you will need the following roles
Business_Application_Studio_Developer if you want to use BAS to write the plugin (you can also use VS Code if you want too)
Business_Application_Studio_Extension_Deployer - this role allows you to deploy the extension.
You also need to be allocated as a Space Developer in the space where you want to deploy the plugin.
Hi Kevin ,
I can't find my plugin in the plugin list.
Thanks and Regards,
Can you use the developer tools in chrome (f12) to see what error you can see when loading the POD Designer and / or your POD ?
Typically its a CORS issue.
I have the below roles .
Thanks and regards,
How can I resolve the CORS issue?
Thanks and regards,
Your CORS settings are in the MTA.YAML file , the url listed in this file must match the url of the system trying to access the plugin otherwise it will reject it.
Thank you so much .I have resolved the issue.
Thanks and regards,