In this part of the blog series, I will show you the steps I have followed to create an extension app using SAP WebIDE.
Below is the home page of my SuccessFactors tenant. At the end of this blog series, there will be a new custom tile added to this home page which will be used to launch the extension application.
Navigate to “Manage OAuth2 Client applications”. Locate the application with the name “HCP_EXT_SERVICE_<TIMESTAMP>”. This would have been automatically created when we triggered the provisioning process earlier. This is for the Portal service in SAP Cloud Platform.
When you view the application, you will get to see the API key. You could use this API key in the destination created earlier in SAP Cloud Platform cockpit.
As a best practice, it is recommended to create an oAuth client for each of your application. You can click on "Register Client Application" button to create an new oAuth client. In the Application URL, you would need to provide the complete URL of the HTML5 application. For X.509 certificate, copy the contents of "Signing certificate" obtained from the Trust settings of the SAP Cloud Platform extension account.
You would need to provide permissions to enable access to the extensions site directory as documented in the Help page. Navigate to "Manage Permissions Groups" and select " Extensions Administrators"
In the People group, select username and add the relevant users who would need access to the extension directory
Before we start to build a HTML5 based extension application, we first need to find out the list of available APIs. The best place to find this is SAP API Hub.
This is a one-stop shop for all SAP Solution API's, and cloud integration content. You can easily browse through and discover all the APIs which are exposed from SuccessFactors. In the below screenshot, I am in the SuccessFactors foundation APIs and looking to explore the User Management APIs.
When I select the artifact “User Management”, it will list all the OData Entity endpoints and the operations permitted for each of them. I can go through the provided documentation and schema structure to understand the input/output parameter. There is an option to try the API and also generate sample code in different runtimes.
Here is the list of all the SuccessFactors API server.
Let’s try and use this API and build an extension app. I am going to use SAP WebIDE to build an app based on the Fiori Master-Detail template. One thing to note here is that the SAPUI5 version supported for SuccessFactors extension is the maintenance version. At the time of writing this blog, 1.44 is the stable maintenance version. If you build the app using the innovation version, it won’t render properly within the SuccessFactors extension site template which I will show you later.
When you are in SAP WebIDE, use the menu File > New > Project from template.
In the “Data Connection” tab, select the destination created earlier. Since I am trying to use the User information in the extension app, I have provided a suffix “/User”. Clicking on “Test” will fetch the metadata and list all the properties of this entity.
In the Template customization, I have selected the below properties for the Master-Detail template.
This will generate a basic Master-Detail app and I can customize this later using the Layout editor to add/change the fields on the screen. After making all the changes, here is the final application which displays all the users along with their Direct Reports.
Another interesting feature in SAP WebIDE is the ability to convert this HTML5 app to a Portal widget. Using the context menu, I can easily convert this app to a Portal service component. More info on this can be found in the openSAP course - Building Portal Sites on SAP Cloud Platform
I need to select the location of component.js file and provide a name for the Widget.
Once this is done, there will be a new file in the project workspace and few of the existing files would have been modified. More information can be found in this help page.
The last step in SAP WebIDE is to deploy the app to SAP Cloud Platform.
Once the extension app is deployed, the details of the app can be viewed from the HTML5 applications menu of SAP Cloud Platform cockpit.
In the next blog, we will look at how to create a Portal site (Extension template) and design a page which has the HTML5 app embedded as a widget
Creating a HTML5 based extension application using SAP WebIDE
Below is the home page of my SuccessFactors tenant. At the end of this blog series, there will be a new custom tile added to this home page which will be used to launch the extension application.
Navigate to “Manage OAuth2 Client applications”. Locate the application with the name “HCP_EXT_SERVICE_<TIMESTAMP>”. This would have been automatically created when we triggered the provisioning process earlier. This is for the Portal service in SAP Cloud Platform.
When you view the application, you will get to see the API key. You could use this API key in the destination created earlier in SAP Cloud Platform cockpit.
As a best practice, it is recommended to create an oAuth client for each of your application. You can click on "Register Client Application" button to create an new oAuth client. In the Application URL, you would need to provide the complete URL of the HTML5 application. For X.509 certificate, copy the contents of "Signing certificate" obtained from the Trust settings of the SAP Cloud Platform extension account.
You would need to provide permissions to enable access to the extensions site directory as documented in the Help page. Navigate to "Manage Permissions Groups" and select " Extensions Administrators"
In the People group, select username and add the relevant users who would need access to the extension directory
Before we start to build a HTML5 based extension application, we first need to find out the list of available APIs. The best place to find this is SAP API Hub.
This is a one-stop shop for all SAP Solution API's, and cloud integration content. You can easily browse through and discover all the APIs which are exposed from SuccessFactors. In the below screenshot, I am in the SuccessFactors foundation APIs and looking to explore the User Management APIs.
When I select the artifact “User Management”, it will list all the OData Entity endpoints and the operations permitted for each of them. I can go through the provided documentation and schema structure to understand the input/output parameter. There is an option to try the API and also generate sample code in different runtimes.
Here is the list of all the SuccessFactors API server.
Let’s try and use this API and build an extension app. I am going to use SAP WebIDE to build an app based on the Fiori Master-Detail template. One thing to note here is that the SAPUI5 version supported for SuccessFactors extension is the maintenance version. At the time of writing this blog, 1.44 is the stable maintenance version. If you build the app using the innovation version, it won’t render properly within the SuccessFactors extension site template which I will show you later.
When you are in SAP WebIDE, use the menu File > New > Project from template.
In the “Data Connection” tab, select the destination created earlier. Since I am trying to use the User information in the extension app, I have provided a suffix “/User”. Clicking on “Test” will fetch the metadata and list all the properties of this entity.
In the Template customization, I have selected the below properties for the Master-Detail template.
This will generate a basic Master-Detail app and I can customize this later using the Layout editor to add/change the fields on the screen. After making all the changes, here is the final application which displays all the users along with their Direct Reports.
Another interesting feature in SAP WebIDE is the ability to convert this HTML5 app to a Portal widget. Using the context menu, I can easily convert this app to a Portal service component. More info on this can be found in the openSAP course - Building Portal Sites on SAP Cloud Platform
I need to select the location of component.js file and provide a name for the Widget.
Once this is done, there will be a new file in the project workspace and few of the existing files would have been modified. More information can be found in this help page.
The last step in SAP WebIDE is to deploy the app to SAP Cloud Platform.
Once the extension app is deployed, the details of the app can be viewed from the HTML5 applications menu of SAP Cloud Platform cockpit.
In the next blog, we will look at how to create a Portal site (Extension template) and design a page which has the HTML5 app embedded as a widget
- SAP Managed Tags:
1 Comment
