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 :
cd projects
mkdir podplugin
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
yo dmcpodplugin
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.
Press Create.
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.
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 :
cd projects
mkdir podplugin
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
yo dmcpodplugin
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.
Press Create.
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.
- SAP Managed Tags:
42 Comments
