diff --git a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_1.png b/tutorials/abap-environment-shell-plugin-enrich/Preview_app_1.png deleted file mode 100644 index 1b3cd69b..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_1.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_1_2.png b/tutorials/abap-environment-shell-plugin-enrich/Preview_app_1_2.png deleted file mode 100644 index 131791f1..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_1_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_1_new.png b/tutorials/abap-environment-shell-plugin-enrich/Preview_app_1_new.png deleted file mode 100644 index 896b3050..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_1_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_1_storyboard.png b/tutorials/abap-environment-shell-plugin-enrich/Preview_app_1_storyboard.png deleted file mode 100644 index 8e134948..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_1_storyboard.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_2.png b/tutorials/abap-environment-shell-plugin-enrich/Preview_app_2.png deleted file mode 100644 index 25b6f924..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_2_new.png b/tutorials/abap-environment-shell-plugin-enrich/Preview_app_2_new.png deleted file mode 100644 index cd98b314..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_2_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_3.png b/tutorials/abap-environment-shell-plugin-enrich/Preview_app_3.png deleted file mode 100644 index 2906c5bc..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_3.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_4.png b/tutorials/abap-environment-shell-plugin-enrich/Preview_app_4.png deleted file mode 100644 index 28ad99ed..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/Preview_app_4.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/abap-environment-shell-plugin-enrich.md b/tutorials/abap-environment-shell-plugin-enrich/abap-environment-shell-plugin-enrich.md deleted file mode 100644 index 8316ff1e..00000000 --- a/tutorials/abap-environment-shell-plugin-enrich/abap-environment-shell-plugin-enrich.md +++ /dev/null @@ -1,417 +0,0 @@ ---- -title: Enrich your Shell Plug-in with OData Services -description: Learn how to enrich your shell plug-in with the use of OData Services to expose user-related information. -keywords: tutorial -auto_validation: true -time: 45 -tags: [ tutorial>intermediate, programming-tool>abap-development, software-product>sap-business-application-studio, software-product-function>sap-s-4hana-cloud--abap-environment] -primary_tag: software-product>sap-btp--abap-environment -author_name: Ulrike Liebherr -author_profile: https://github.com/Liebherr -parser: v2 ---- - -## Prerequisites - - You have successfully completed the tutorial [Implement Custom Shell Plug-in in the SAP BTP ABAP Environment](abap-environment-shell-plugin) - ->This tutorial was written for SAP BTP ABAP Environment. However, you should be able to use it in SAP S/4HANA Cloud Environment in the same way. - ->Throughout this tutorial, you will create various development objects and UI components. Wherever the suffix `###` or `000` is used, please replace it with your initials or group number. - -## You will learn - - How to create an OData Service to expose user-related information using the ABAP Developer Tool in Eclipse. - - How to add the OData Service to your SAPUI5 project in Business Application Studio. - - How to adjust your SAPUI5 project so that the user-related data is displayed when accessing the application. - -### Create a Business User Role Data Definition -In this tutorial you will continue working on the shell plug-in you created in the pervious tutorial in this series. You will learn how to enrich it using OData Services to expose user-related information. To do this, you will first need to create a Data Definition to expose the User ID of the current user and the corresponding Business Role information. - -1. Access ABAP Developer Tool in Eclipse, connect to your SAP BTP ABAP Environment, and open the package you created as part of the previous tutorial. - -2. Right click on the package and select **New** > **Other ABAP Repository Object**: - - ![Create data definition](create_data_definition_1.png) - -3. In the search bar, search for **Data Definition** and click on it. - - ![Create data definition - create](create_data_definition_2.png) - -4. Enter a **Name** and a **Description**. Click on **Next**. - - ![Create data definition - create 2](create_data_definition_3_new.png) - -5. Select the transport request you created in the previous tutorial, and click on **Next**. - - ![Create data definition - transport request](create_transport_request_new.png) - -6. The Data Definition is initialized with a pre-filled code based on your chosen template. Adjust it as follows: -``` ABAP -@AccessControl.authorizationCheck: #NOT_REQUIRED -@EndUserText.label: 'Business User Role' -define root view entity Z_C_BusinessUserRole_### as select from I_IAMBusinessUserBusinessRole as _BusinessUserRole - association [0..*] to I_IAMBusinessRoleText as _BusinessRoleText on $projection.BusinessRoleUUID = _BusinessRoleText.BusinessRoleUUID -{ - key abap.char'Me' as ID, - key _BusinessUserRole.BusinessRoleUUID as BusinessRoleUUID, - _BusinessUserRole.BusinessRole as BusinessRole, - _BusinessRoleText.Name as Name, - /* Associations */ - _BusinessRoleText - } -where _BusinessUserRole.UserID = $session.user -``` - -8. Save your Data Definition and activate it using the **Activate** icon. - - ![Activate](activate_icon.png) - -### Create a Business User Data Definition -Now you need to create a second Data Definition, which will take the User ID exposed by the Data Definition you created in the previous step, and will expose the data related to that User ID, such as name and email address. - -1. As in the previous step, right click on the package and select **New** > **Other ABAP Repository Object**. In the search bar, search for **Data Definition** and click on it. Enter a **Name** and a **Description**. Click on **Next**. - - ![Create data definition - Business User](create_data_definition_7_new.png) - -2. Select your transport request and click on **Finish**. - -3. The Data Definition is initialized with a pre-filled code based on your chosen template. Adjust it as follows: -``` ABAP -@AccessControl.authorizationCheck: #NOT_REQUIRED -@EndUserText.label: 'Business User' -define root view entity Z_C_BusinessUser_### as select from I_BusinessUserBasic - association [0..*] to Z_C_BusinessUserRole_### as _BusinessUserRole on $projection.ID = _BusinessUserRole.ID - { - key abap.char'Me' as ID, - BusinessPartner, - BusinessPartnerUUID, - PersonFullName, - UserID, - _WorkplaceAddress.PhoneNumber, - _WorkplaceAddress.DefaultEmailAddress, - _WorkplaceAddress.Building, - _WorkplaceAddress.RoomNumber, - /* Associations */ - _BusinessUserRole - } -where UserID = $session.user -``` - -4. Save your Data Definition and activate it using the **Activate** icon. - - ![Activate -2](activate_icon.png) - -### Create a Service Definition -In order to expose the data from the two previous Data Definitions you need to create a Service Definition. - -1. Right click on the package and select **New** > **Other ABAP Repository Object**. In the search bar, search for **Service Definition** and click on it. Enter a **Name** and a **Description**. Click on **Next**. - - ![Create service definition](create_service_definition_1_new.png) - -2. Select your transport request and click on **Finish**. - -3. Add your Projection Views to your Service Definition as follows: -``` ABAP -@EndUserText.label: 'Business User Service Definition' -define service ZUI_BUSINESSUSER_### { - expose Z_C_BusinessUser_### as BusinessUser; - expose Z_C_BusinessUserRole_### as BusinessUserRole; -} -``` - -4. Save your Service Definition and activate it using the **Activate** icon. - - ![Activate - 2](activate_icon.png) - -### Create a Service Binding -Your Service Definition will be consumed by your SAP Fiori Application via the use of a Service Binding. - -1. In your project explorer, right click on your Service Definition and select **New Service Binding**. - - ![Create service binding](create_service_binding_1_new.png) - -2. Enter a **Name** and a **Description**. In the **Binding Type** dropdown menu, select the option **OData V4 - UI** and click on **Next**. - - ![Create service binding - name and description](create_service_binding_2_new.png) - - >It is good practice to include the type of Service Binding in the Service Binding name, e.g.: adding the suffix `V_O4` to the name of Service Bindings of type OData Service V4. - -3. Select your transport request and click on **Finish**. - -4. Save your Service Binding and activate it using the **Activate** icon. - - ![Activate - 3](activate_icon.png) - -5. In the newly created Service Binding, click on the **Publish** button. - - ![Create service binding - publish](create_service_binding_3_new.png) - - >Publishing a Service Binding can take up to a few minutes. Once the Service Binding is successfully published, the **Local Service Endpoint** parameter will change to **Published**. - -6. You can now preview your Service Binding: click on the Service URL link. - - ![Create service binding - preview](create_service_binding_4.png) - -7. A new window will open up in your browser. In the URL of the browser window, Replace the last part `?sap-client=100` with `BusinessUser('Me')` and press Enter. Your personal user information will be displayed. - - ![Create service binding - URL](create_service_binding_6.png) - -### Add the OData Service to your SAPUI5 Project -Now that you have created an OData Service which exposes user-related information, you need to add it to your SAPUI5 project in Business Application Studio, to enhance your shell plug-in. - -1. In Business Application Studio, open the folder of your project and navigate to the **`webapp`** folder. Right click on the **`manifest.json`** file and select **Open Service Manager**. - - ![Open Service manager](open_service_manager.png) - -2. This will open an overview of the services used in your project. If there are any previous services, click on the bin icon to delete them. - - ![Service overview](service_overview.png) - -3. To add a new OData Service, click on **Add Service**. - - ![Add new service](add_new_service_1.png) - -4. Select the **Destination** option. In the **Destination** dropdown menu, select the destination pointing to your SAP BTP ABAP Environment. In the **Provide Service** section, select **Fetch** and from the **Select a service** dropdown menu, select your Service Binding. Click on **Add**. - - ![Add new service - parameters](add_new_service_2_new.png) - -5. Open the **`manifest.json`** file: you can see that the OData Service has been added automatically under `"dataSources"` configuration. - - ![Add new service - manifest.json](manifest_json_new_service_new.png) - -6. Open the **`manifest.json`** file. In the configuration `sap.ui5` > `dependencies` > `libs`, remove the following parameters: `"sap.f": {}`, `"sap.suite.ui.generic.template": {}`, `"sap.ui.comp": {}`, `"sap.ui.generic.app": {}` and `"sap.ui.table": {}`. Add the parameter `"sap.ui.layout": {}` after `"sap.ushell": {}`. The configuration should look like this: - - ![Modify manifest.json file](modify_json_parameters.png) - -7. In your workspace, go to your project folder and make a right click. Select **Open in Integrated Terminal**. This will open a new terminal window. Input the command `npx @sap-ux/create add mockserver-config` and press enter. - - ![Create mockserver](install_dependency_new.png) - -8. A new dependency will be added in the **`package.json`** file, in the configuration `"main"` > `"devDependencies"`: - - ![Modify package.json file - 2](modify_package_json_parameters_2.png) - -### Adjust your SAPUI5 Project -Your SAPUI5 Application can now consume user-related information via the OData Service you created. You now need to specify how you want this information to be consumed and displayed in your application. You will first modify the **`i18n.properties`** file, which defines which text is displayed for each of your user-related data. You will then create a View of type Fragment in your project, to define the layout with which the user-related information will be displayed. And finally, you will add this Fragment View to the content of your application. - -1. In the **`webapp`** > **`i18n`** folder, open the **`i18n.properties`** file. Substitute the file content with the following code: -``` HTML -#Texts for manifest.json -#XTIT: Application name -appTitle=Shell Plug-in -#YDES: Application description -appDescription=Shell Plug-in -#XTIT: Main view title -title=Shell Plug-in -flpTitle=Shell Plug-in -flpSubtitle= -#Title and Subtitle of the Plug-in -titleTab=Personalized shell plug-in -subtitleTab=Plug-in example -#Fragment Labels -labelUserID=System User ID -tooltipUserID=Steampunk System User ID -labelMail=E-Mail Address -tooltipMail=User-Specific E-Mail Address -labelPhone=Phone Number -tooltipPhone=User-Specific Phone Number -labelLocation=Location -tooltipLocation=User-Specific Location -titleTable=Assigned Business Roles -noContentTable=No Assigned Business Roles -labelBusinessRole=Business Role -labelBusinessRoleName=Name -``` - -2. Via the OData Service you created in a previous step, you can consume Business User details associated with the current Business User. You now need to define how these data will be displayed. To do this, you need to create a form, and specify its layout and contents. In your project, go to the empty folder **`webapp`** > **`view`**. Right click on the folder and select **New File**. - - ![Create new view file](create_view_file_1.png) - -3. Input a **Name** for your new View file, and make sure it ends with `.fragment.xml` to create a View of type Fragment . Click on **OK**. - - ![Create new view file - name](create_view_file_2.png) - -4. Open the newly created Fragment View file, and input the following code: -``` XML - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <Table noDataText="{i18n>noContentTable}" id="TableBusinessRoles" items="{path:'_BusinessUserRole'}"> - <items> - <ColumnListItem type="Active" id="ColumnItem"> - <cells> - <Text text="{BusinessRole}" id="BusinessRole"/> - <Text text="{Name}" id="BusinessRoleName"/> - </cells> - </ColumnListItem> - </items> - <columns> - <Column id="ColumnBusinessRole"> - <header> - <Label text="{i18n>labelBusinessRole}" id="LabelBusinessRole"/> - </header> - </Column> - <Column id="ColumnBusinessRoleName"> - <header> - <Label text="{i18n>labelBusinessRoleName}" id="LabelBusinessRoleName"/> - </header> - </Column> - </columns> - </Table> - </content> - </Page> -</core:FragmentDefinition> -``` - -5. Your Fragment View defines how you want the data to be displayed. You now need to load the Fragment View into the content of your SAPUI5 Application, so that the form containing the user-related information will actually be displayed in your application. In the **`webapp`** folder, open the **`Component.js`** file. Replace the content of the file with the following code: - -``` JavaScript -sap.ui.define([ - "sap/ui/core/UIComponent", - "sap/ui/model/resource/ResourceModel", - "sap/ui/core/Fragment" - ], - function (UIComponent, ResourceModel, Fragment) { - "use strict"; - - return UIComponent.extend("zplugin###.Component", { - metadata: { - manifest: "json" - }, - - /** - * The component is initialized by UI5 automatically during the startup of the app and calls the init method once. - * @public - * @override - */ - init: function () { - // call the base component's init function - UIComponent.prototype.init.apply(this, arguments); - - var businessUserModel = this.getModel(); - - var vtitleTab = new ResourceModel({ - bundleName: "zplugin###.i18n.i18n" - }).getResourceBundle().getText("titleTab"); - - var vsubtitleTab = new ResourceModel({ - bundleName: "zplugin###.i18n.i18n" - }).getResourceBundle().getText("subtitleTab"); - - var oRenderer = sap.ushell.Container.getRenderer(); - var oEntry = { - title: vtitleTab, - icon: "sap-icon://role", - value: function () { - return jQuery.Deferred().resolve(vsubtitleTab); - }, - content: function () { - if (!this.oFragment) { - this.oFragment = Fragment.load({ - type: "XML", - id: "BusinessUserFragment", - name: "zplugin###.view.BusinessUserFragment" - }).then(function (fragment) { - var i18nModel = new ResourceModel({ - bundleName: "zplugin###.i18n.i18n" - }); - fragment.setModel(i18nModel, "i18n"); - fragment.setModel(businessUserModel); - - return fragment; - }); - } - return this.oFragment; - }, - onSave: function () { - return jQuery.Deferred().resolve(); - } - }; - var i18nModel = new ResourceModel({ - bundleName: "zplugin###.i18n.i18n" - }); - oRenderer.setModel(i18nModel, "i18n"); - oRenderer.addUserPreferencesEntry(oEntry); - } - }); - } - ); -``` -> If you have chosen different names for your project and for your Fragment View in the previous steps, you will need to adjust the code above: replace any instance of `###` with your initials or group number, and replace `BusinessUserFragment` with the name of your View. - -### Preview your SAPUI5 Application -Your enhanced SAPUI5 Application can be previewed before it is deployed. Using the preview functionality is good practice before deploying an application, to make sure that the UI looks as intended and the application's functionalities work as desired. - -1. In Business Application Studio, In the **Storyboard** tab right click on your UI Application and click on **Open Application Info**. - - ![Preview application](Preview_app_1_storyboard.png) - - >The **Storyboard** tab can always be open from the Search bar by typing the command `> Open Storyboard`. - -2. In the **Application Info** view, select the **Preview Application** tile. - - ![Preview application 2](Preview_app_1_2.png) - -3. Select **start fiori-run**. This will prompt a new terminal window which will run the **start fiori-run** command. This can take up to a few seconds. Once it is done, a preview of your application will open up in a new browser window. - - ![Preview application - start fiori run](Preview_app_2_new.png) - -4. In the preview of your application, click on the user icon in the top-right corner and open the **Settings**. Your shell plug-in is listed in the user's settings dialog. User-related information is displayed according to the layout you defined using the Fragment View. - - ![Application preview - settings](Preview_app_3.png) - - ![Application preview - shell plug-in](Preview_app_4.png) - -### Deploy your Enhanced Shell Plug-in -You can now re-deploy your SAPUI5 Application with an enhanced shell plug-in to your SAP BTP ABAP Environment. - -1. In Business Application Studio, in the **Application Info** view, click on the **Deploy** tile: - - ![Deploy application](deploy_application.png) - -2. The deployment process will begin. You will be prompted to confirm the deployment by typing `Y`. Once the SAPUI5 Application is successfully deployed to your SAP BTP ABAP Environment, the terminal will return the status: -`Deployment Successful`. ->The deployment process can take up to a few minutes. - -### Test your Shell Plug-in -After a successful deployment, your shell plug-in will be updated in the system. Login to your SAP BTP ABAP Environment with a Business User with the necessary Business Role (see previous tutorial in this series). Open your application by clicking on the application tile. The plug-in can be accessed via the user settings dialog. The plug-in returns data related to your Business User and a list of Business Roles that are assigned to your Business User. - -![Final plugin](final_plugin.png) - -### Test Yourself diff --git a/tutorials/abap-environment-shell-plugin-enrich/activate_icon.png b/tutorials/abap-environment-shell-plugin-enrich/activate_icon.png deleted file mode 100644 index 512aadf1..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/activate_icon.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/add_new_service_1.png b/tutorials/abap-environment-shell-plugin-enrich/add_new_service_1.png deleted file mode 100644 index 213280bf..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/add_new_service_1.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/add_new_service_2.png b/tutorials/abap-environment-shell-plugin-enrich/add_new_service_2.png deleted file mode 100644 index 92fa122e..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/add_new_service_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/add_new_service_2_new.png b/tutorials/abap-environment-shell-plugin-enrich/add_new_service_2_new.png deleted file mode 100644 index ed33ef3a..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/add_new_service_2_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_1.png b/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_1.png deleted file mode 100644 index 5fea62e0..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_1.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_2.png b/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_2.png deleted file mode 100644 index ea48e04b..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_3.png b/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_3.png deleted file mode 100644 index c31ca5d2..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_3.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_3_new.png b/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_3_new.png deleted file mode 100644 index 3d5540e7..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_3_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_4.png b/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_4.png deleted file mode 100644 index 5941aa5b..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_4.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_5.png b/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_5.png deleted file mode 100644 index 10fbd6e4..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_5.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_6.png b/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_6.png deleted file mode 100644 index cdf3c027..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_6.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_7.png b/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_7.png deleted file mode 100644 index b457ecb7..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_7.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_7_new.png b/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_7_new.png deleted file mode 100644 index 2d530f42..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_data_definition_7_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_1.png b/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_1.png deleted file mode 100644 index 9486255b..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_1.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_1_new.png b/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_1_new.png deleted file mode 100644 index 1d2f9b20..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_1_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_2.png b/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_2.png deleted file mode 100644 index fdf68542..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_2_new.png b/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_2_new.png deleted file mode 100644 index 607c37c5..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_2_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_3.png b/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_3.png deleted file mode 100644 index add9acab..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_3.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_3_new.png b/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_3_new.png deleted file mode 100644 index f354610e..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_3_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_4.png b/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_4.png deleted file mode 100644 index 6f11ba72..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_4.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_4_new.png b/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_4_new.png deleted file mode 100644 index 2f7cdb8a..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_4_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_5.png b/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_5.png deleted file mode 100644 index 9af17dac..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_5.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_6.png b/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_6.png deleted file mode 100644 index 14990e52..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_service_binding_6.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_service_definition_1.png b/tutorials/abap-environment-shell-plugin-enrich/create_service_definition_1.png deleted file mode 100644 index 87e06f0a..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_service_definition_1.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_service_definition_1_new.png b/tutorials/abap-environment-shell-plugin-enrich/create_service_definition_1_new.png deleted file mode 100644 index d9b50bce..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_service_definition_1_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_service_definition_2.png b/tutorials/abap-environment-shell-plugin-enrich/create_service_definition_2.png deleted file mode 100644 index e4044f1f..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_service_definition_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_transport_request.png b/tutorials/abap-environment-shell-plugin-enrich/create_transport_request.png deleted file mode 100644 index 53385457..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_transport_request.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_transport_request_new.png b/tutorials/abap-environment-shell-plugin-enrich/create_transport_request_new.png deleted file mode 100644 index 6a8505e2..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_transport_request_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_view_file_1.png b/tutorials/abap-environment-shell-plugin-enrich/create_view_file_1.png deleted file mode 100644 index edb44544..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_view_file_1.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/create_view_file_2.png b/tutorials/abap-environment-shell-plugin-enrich/create_view_file_2.png deleted file mode 100644 index 783e2150..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/create_view_file_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/deploy_application.png b/tutorials/abap-environment-shell-plugin-enrich/deploy_application.png deleted file mode 100644 index 9afdfb80..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/deploy_application.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/final_plugin.png b/tutorials/abap-environment-shell-plugin-enrich/final_plugin.png deleted file mode 100644 index 70afc25c..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/final_plugin.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/install_dependency.png b/tutorials/abap-environment-shell-plugin-enrich/install_dependency.png deleted file mode 100644 index ef53a306..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/install_dependency.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/install_dependency_new.png b/tutorials/abap-environment-shell-plugin-enrich/install_dependency_new.png deleted file mode 100644 index 00051715..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/install_dependency_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/manifest_json_new_service.png b/tutorials/abap-environment-shell-plugin-enrich/manifest_json_new_service.png deleted file mode 100644 index ab483543..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/manifest_json_new_service.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/manifest_json_new_service_new.png b/tutorials/abap-environment-shell-plugin-enrich/manifest_json_new_service_new.png deleted file mode 100644 index 23079063..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/manifest_json_new_service_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/modify_json_parameters.png b/tutorials/abap-environment-shell-plugin-enrich/modify_json_parameters.png deleted file mode 100644 index 4fb9d423..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/modify_json_parameters.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/modify_package_json_parameters_1.png b/tutorials/abap-environment-shell-plugin-enrich/modify_package_json_parameters_1.png deleted file mode 100644 index 8ea4d07e..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/modify_package_json_parameters_1.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/modify_package_json_parameters_2.png b/tutorials/abap-environment-shell-plugin-enrich/modify_package_json_parameters_2.png deleted file mode 100644 index ca7c6357..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/modify_package_json_parameters_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/open_service_manager.png b/tutorials/abap-environment-shell-plugin-enrich/open_service_manager.png deleted file mode 100644 index a60856c8..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/open_service_manager.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/open_terminal.png b/tutorials/abap-environment-shell-plugin-enrich/open_terminal.png deleted file mode 100644 index fe47ecb6..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/open_terminal.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin-enrich/service_overview.png b/tutorials/abap-environment-shell-plugin-enrich/service_overview.png deleted file mode 100644 index 713914c8..00000000 Binary files a/tutorials/abap-environment-shell-plugin-enrich/service_overview.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/BAS_in_BTP.png b/tutorials/abap-environment-shell-plugin/BAS_in_BTP.png deleted file mode 100644 index 4d0085e9..00000000 Binary files a/tutorials/abap-environment-shell-plugin/BAS_in_BTP.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_1.png b/tutorials/abap-environment-shell-plugin/Create_business_role_1.png deleted file mode 100644 index 16370ac1..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_1.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_2.png b/tutorials/abap-environment-shell-plugin/Create_business_role_2.png deleted file mode 100644 index 784979fd..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_2_new.png b/tutorials/abap-environment-shell-plugin/Create_business_role_2_new.png deleted file mode 100644 index dda6f5e0..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_2_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_3.png b/tutorials/abap-environment-shell-plugin/Create_business_role_3.png deleted file mode 100644 index 378e320f..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_3.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_4.png b/tutorials/abap-environment-shell-plugin/Create_business_role_4.png deleted file mode 100644 index 6a33a779..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_4.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_4_new.png b/tutorials/abap-environment-shell-plugin/Create_business_role_4_new.png deleted file mode 100644 index 9f4d5c66..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_4_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_5.png b/tutorials/abap-environment-shell-plugin/Create_business_role_5.png deleted file mode 100644 index c1a1f39f..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_5.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_5_new.png b/tutorials/abap-environment-shell-plugin/Create_business_role_5_new.png deleted file mode 100644 index cb63b983..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_5_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_6.png b/tutorials/abap-environment-shell-plugin/Create_business_role_6.png deleted file mode 100644 index d6ae9f20..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_6.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_6_new.png b/tutorials/abap-environment-shell-plugin/Create_business_role_6_new.png deleted file mode 100644 index d0170294..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_6_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_7.png b/tutorials/abap-environment-shell-plugin/Create_business_role_7.png deleted file mode 100644 index b19694db..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_7.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_7_new.png b/tutorials/abap-environment-shell-plugin/Create_business_role_7_new.png deleted file mode 100644 index 91ca42e4..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_7_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_8.png b/tutorials/abap-environment-shell-plugin/Create_business_role_8.png deleted file mode 100644 index 73a49285..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_8.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Create_business_role_8_new.png b/tutorials/abap-environment-shell-plugin/Create_business_role_8_new.png deleted file mode 100644 index 8b23145d..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Create_business_role_8_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Preview_app_1.png b/tutorials/abap-environment-shell-plugin/Preview_app_1.png deleted file mode 100644 index 8e134948..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Preview_app_1.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Preview_app_1_2.png b/tutorials/abap-environment-shell-plugin/Preview_app_1_2.png deleted file mode 100644 index 131791f1..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Preview_app_1_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Preview_app_2.png b/tutorials/abap-environment-shell-plugin/Preview_app_2.png deleted file mode 100644 index 36c26302..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Preview_app_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Preview_app_2_new.png b/tutorials/abap-environment-shell-plugin/Preview_app_2_new.png deleted file mode 100644 index 83e75a22..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Preview_app_2_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Preview_app_3.png b/tutorials/abap-environment-shell-plugin/Preview_app_3.png deleted file mode 100644 index f5807602..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Preview_app_3.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/Preview_app_4.png b/tutorials/abap-environment-shell-plugin/Preview_app_4.png deleted file mode 100644 index a4bcebf0..00000000 Binary files a/tutorials/abap-environment-shell-plugin/Preview_app_4.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/abap-environment-shell-plugin.md b/tutorials/abap-environment-shell-plugin/abap-environment-shell-plugin.md deleted file mode 100644 index 37adf5eb..00000000 --- a/tutorials/abap-environment-shell-plugin/abap-environment-shell-plugin.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: Implement a Custom Shell Plug-in in the SAP BTP ABAP Environment -description: Learn how to develop and deploy a custom shell plug-in to your SAP BTP ABAP Environment as part of a SAP Fiori Application. -keywords: tutorial -auto_validation: true -time: 45 -tags: [ tutorial>intermediate, programming-tool>abap-development, software-product>sap-business-application-studio, software-product-function>sap-s-4hana-cloud--abap-environment] -primary_tag: software-product>sap-btp--abap-environment -author_name: Ulrike Liebherr -author_profile: https://github.com/Liebherr -parser: v2 ---- - -## Prerequisites - - You have access to a SAP BTP Subaccount with a SAP Business Application Studio subscription. - - You have access to a SAP BTP ABAP Environment in a Cloud Foundry space in the subaccount. - - You have connected SAP Business Application Studio to your SAP BTP ABAP Environment via destination. - - You have a user in the subaccount, with `Business_Application_Studio_Developer` role collection. - - You are a member of the Cloud Foundry space where your SAP BTP ABAP Environment resides, and you have **Space Developer** role. - - You have a user in your SAP BTP ABAP Environment with the following roles: `SAP_BR_ADMINISTRATOR` and `SAP_BR_DEVELOPER`. - - You are connected to your SAP BTP ABAP Environment in the ABAP Development Tool (ADT) in Eclipse. - ->This tutorial was written for SAP BTP ABAP Environment. However, you should be able to use it in SAP S/4HANA Cloud Environment in the same way. - ->Throughout this tutorial, you will create various development objects and UI components. Wherever the suffix `###` or `000` is used, please replace it with your initials or group number. - -## You will learn -- How to create a custom shell plug-in. -- How to deploy the shell plug-in to your SAP BTP ABAP Environment as part of a SAP Fiori Application. -- How to create a Business Catalog and Business Role to regulate access to the SAP Fiori Application. - ---- - -### Create a Package in ABAP Developer Tool in Eclipse - -The shell plug-in will be deployed to the local `ZLOCAL` software component in your SAP BTP ABAP Environment. For this reason, you need to create in ADT a local package and a transport request for the software component. - -1. Access ABAP Developer Tool in Eclipse and connect to your SAP BTP ABAP Environment. - -2. Right click on your SAP BTP ABAP Environment and click on **New** > **ABAP Package**: - - ![Create new package](create_new_package.png) - -3. Input a name and a description for your package. Make sure that the **Package Type** is **Development**. Click on **Next**. - - ![Create new package - name and description](create_new_package_2_new.png) ->For the scope of this tutorial, the package name is `Z_PLUGIN_###`. You can use this name or choose your own package name. But make sure that your package name starts with `Z`. Take note of the name of the package you just created, you will need it in a later step. You can also mark the **Add to favorite package** option, so the package will be automatically added to your favorites and it will be easier to find later on. - -4. In the **Software Component** field input `ZLOCAL`. Click on **Next**. - - ![Create new package - select software component](create_new_package_3.png) - -5. Select the **Create a new request** option and input a description for your transport request. Click on **Finish**. The package will be created. - - ![Create new transport request](create_transport_request_new.png) - -6. Open the **Transport Organizer** and select your SAP BTP ABAP Environment. Navigate to **Workbench** > **Local Change Requests** > **Modifiable**. Here you can see the transport request you just created. Take note of the transport request number, you will need it in a later step. - - ![Transport organizer - transport request number](transport_organizer_2_new.png) - -### Create a SAPUI5 Project in Business Application Studio - -The shell plug-in will be deployed to your SAP BTP ABAP Environment as part of a SAP Fiori Application. For this reason, you need to create an empty SAP Fiori Application of type SAPUI5 in Business Application Studio. - -1. In your SAP BTP Subaccount, navigate to the **Instances and Subscriptions** tab in the left panel. In the **Subscriptions** tab, click on the **SAP Business Application Studio** link to access your instance of the SAP Business Application Studio. - - ![Access BAS from BTP](BAS_in_BTP.png) - -2. Click on **Create Dev Space** button in the top right corner, input a Dev Space name and select the **SAP Fiori** option. Click on **Create Dev Space**. This might take a couple of minutes. Once the developer workspace is running, click on it to access it. - - ![Create Dev Space in BAS](create_dev_space.png) - -3. Click on **Start from template**. - -4. Select the **SAP Fiori Application** option and click on **Start**. - - ![Create SAP Fiori application](create_SAPUI5_project.png) - -5. In the **Template Type** dropdown menu, select **SAP Fiori**. Select the **Basic** `floorplan` and click on **Next**. - - ![Create SAPUI5 project](create_SAPUI5_project_2.png) - -6. In the **Data source** dropdown menu, select **None** and click on **Next**. - - ![Create SAP Fiori application - Data source](create_SAPUI5_project_3.png) - -7. In the **View name** field, choose a view name and click on **Next**. - - ![Create SAP Fiori application - Entity selection](create_SAPUI5_project_4.png) ->For the scope of this tutorial the view name is `plugin_view`. You can use this name or choose a different name. If you choose a different view name, make sure to keep it consistent throughout the rest of the tutorial. While developing a SAP Fiori Application it is good practice to add the suffix `_view` to the name of your view. - -8. Input a **Module name**, an **Application title** and a **Description** of your choice. Select the **Add deployment configuration** option and the **Add FLP configuration** option. Click on **Next**. - - ![Create SAP Fiori application - Project attributes](create_SAPUI5_project_5_new.png) - -9. In the **Please choose the target** dropdown menu, select **ABAP**. In the **Destinations** dropdown menu, select the destination that points towards your SAP BTP ABAP Environment. Input a name for the **SAPUI5 ABAP Repository** and a **Deployment description**. In the **Package** field, input the name of the package that you created in ABAP Development Tool in Eclipse in the previous step. Select **Enter manually** and Input the **Transport Request** number you created in the previous step. Click on **Next**. - - ![Create SAP Fiori application - Deployment configuration](create_SAPUI5_project_6_new.png) - -10. In the **Semantic Object** field input `Shell` and in the **Action** field input `plugin`. Input a **Title** of your choice. Click on **Finish**. The project folder will be generated. - - ![Create SAP Fiori application - Fiori Launchpad Configuration](create_SAPUI5_project_7_new.png) ->Make sure to input the fields with the correct cases: `Shell` must start with an upper case and `plugin` must start with a lower case. - -### Adjust your SAPUI5 Project - -SAP Fiori Application projects created via the SAP Fiori template are automatically initialized with several basic folders, files and configurations. To create a shell plug-in and deploy it as part of your SAP Fiori Application, you need to change some of these initial configurations. - -1. In Business Application Studio, open the folder of the project you just created and navigate to the **`webapp`** folder. Double click on the **`manifest.json`** file to open it. - - ![Open manifest.json file](open_manifest_json.png) - -2. In the **`manifest.json`** file, modify the following configurations: <ul><li>Under the `"sap.app"` configuration adjust the `"type"` parameter to `"component"`.</li><li>Under the `"crossNavigation"` configuration remove the `"title"`. And add the parameter `"hideLauncher": true`.</li><li>Remove the `"routing"` and the `"rootView"` configurations.</li><li>At the end of the file, insert the following code snippet: - `"sap.flp": {"type": "plugin"}`.</li> At the end your **`mainfest.json`** file should look like the following: -``` JSON -{ - "_version": "1.58.0", - "sap.app": { - "id": "zplugin###", - "type": "component", - "i18n": "i18n/i18n.properties", - "applicationVersion": { - "version": "0.0.1" - }, - "title": "{{appTitle}}", - "description": "{{appDescription}}", - "resources": "resources.json", - "sourceTemplate": { - "id": "@sap/generator-fiori:basic", - "version": "1.11.4", - "toolsId": "ca6d90b1-7c62-441c-8145-fa747953cc5c" - }, - "crossNavigation": { - "inbounds": { - "Shell-plugin": { - "hideLauncher": true, - "semanticObject": "Shell", - "action": "plugin", - "signature": { - "parameters": {}, - "additionalParameters": "allowed" - } - } - } - } - }, - "sap.ui": { - "technology": "UI5", - "icons": { - "icon": "", - "favIcon": "", - "phone": "", - "phone@2": "", - "tablet": "", - "tablet@2": "" - }, - "deviceTypes": { - "desktop": true, - "tablet": true, - "phone": true - } - }, - "sap.ui5": { - "flexEnabled": true, - "dependencies": { - "minUI5Version": "1.120.1", - "libs": { - "sap.m": {}, - "sap.ui.core": {}, - "sap.f": {}, - "sap.suite.ui.generic.template": {}, - "sap.ui.comp": {}, - "sap.ui.generic.app": {}, - "sap.ui.table": {}, - "sap.ushell": {} - } - }, - "contentDensities": { - "compact": true, - "cozy": true - }, - "models": { - "i18n": { - "type": "sap.ui.model.resource.ResourceModel", - "settings": { - "bundleName": "zplugin###.i18n.i18n" - } - } - }, - "resources": { - "css": [ - { - "uri": "css/style.css" - } - ] - } - }, - "sap.flp":{ - "type": "plugin" - } -} -``` ->In the above code snippet, certain parameters are project-dependent and might therefore have different values for you. For this reason, you should use this code snippet as a guide, and manually adjust your **`mainfest.json`** file (rather than simply copy and paste this code snippet). - -3. Delete all the content in your **`controller`** folder (This is a sub-folder of the **`webapp`** folder). Then delete the **`controller`** folder itself. - - ![Delete controller folder](delete_controller_folder.png) - -4. Delete all the content in your **`view`** folder (This is a sub-folder of the **`webapp`** folder). Do not delete the **`view`** folder itself, you will need it in a later step. - - ![Delete view folder content](delete_view_content.png) - -5. Open the **`Component.js`** file in the **`webapp`** folder. Delete the entire content of the file, and replace it with the following code: - -``` JavaScript -sap.ui.define([ - "sap/ui/core/UIComponent" - ], - function (UIComponent) { - "use strict"; - - return UIComponent.extend("zplugin###.Component", { - metadata: { - manifest: "json" - }, - - /** - * The component is initialized by UI5 automatically during the startup of the app and calls the init method once. - * @public - * @override - */ - init: function () { - // call the base component's init function - UIComponent.prototype.init.apply(this, arguments); - - var oRenderer = sap.ushell.Container.getRenderer(); - var oEntry = { - title: "Personalized shell plug-in", - icon: "sap-icon://role", - value: function () { - return jQuery.Deferred().resolve("Plug-in example"); - }, - content: function () { - return jQuery.Deferred().resolve(new sap.m.Text("plugin-text", {text: ""})); - }, - onSave: function () { - return jQuery.Deferred().resolve(); - } - }; - oRenderer.addUserPreferencesEntry(oEntry); - } - }); - } -); -``` - ->In line 7, the `"zplugin###.Component"` is taken from the name of your project. If you chose a different project name in the previous step, make sure to substitute the `zplugin###` with the correct project name. The name of your project can be found in the **`manifest.json`** file under the `"sap.app"`>`"id"` parameter. - -### Preview your SAPUI5 Application - -Your basic SAPUI5 Application can be previewed before it is deployed. Using the preview functionality is good practice before deploying an application, to make sure that the UI looks as intended and the application's functionalities work as desired. - -1. In Business Application Studio, In the **Storyboard** tab right click on your UI Application and click on **Open Application Info**. - - ![Preview application](Preview_app_1.png) - - >The **Storyboard** tab can always be open from the Search bar by typing the command `> Open Storyboard`. - -2. In the **Application Info** view, select the **Preview Application** tile. - - ![Preview application 2](Preview_app_1_2.png) - -3. Select **start fiori-run**. This will prompt a new terminal window which will run the **start fiori-run** command. This can take up to a few seconds. Once it is done, a preview of your application will open up in a new browser window. - - ![Preview application - start fiori run](Preview_app_2_new.png) - -4. In the preview of your application, click on the user icon in the top-right corner and open the **settings**. Your shell plug-in is listed in the user's settings dialog. - - ![Application preview - settings](Preview_app_3.png) - - ![Application preview - shell plug-in](Preview_app_4.png) ->The shell plug-in is currently empty. You will implement it in a later tutorial. - -### Deploy your SAPUI5 Application - -You can now deploy your SAPUI5 Application with a basic (empty) shell plug-in to your SAP BTP ABAP Environment. - -1. In Business Application Studio, in the **Application Info** view, click on the **Deploy** tile: - - ![Deploy application](deploy_application.png) - -2. The deployment process will begin. You will be prompted to confirm the deployment by typing `Y`. Once the SAPUI5 Application is successfully deployed to your SAP BTP ABAP Environment, the terminal will return the status: -`Deployment Successful`. You can now close the terminal window. ->The deployment process can take up to a few minutes. - -3. After a successful deployment, your software package in ABAP Developer Tool in Eclipse will be automatically enhanced by a BSP Application and a Launchpad App Descriptor Item. - - ![New ADT files](new_ADT_files_new.png) - -### Create an IAM App - -Now that your basic shell plug-in has been successfully deployed to your SAP BTP ABAP Environment as part of a SAPUI5 Application, you need to assign the application to a Business Catalog. To do this, you first need to create an IAM App, which points to your deployed SAPUI5 Application. (You will assign the IAM App to a Business Catalog in a later step). - -1. Access ABAP Developer Tool in Eclipse and connect to your SAP BTP ABAP Environment. - -2. Right click on your package and select **New** > **Other ABAP repository object**. - - ![Create business catalog 1](create_business_catalog_1_new.png) - -3. In the search bar, search for **IAM App** and click on it. - - ![Create business catalog 2](create_business_catalog_2.png) - -4. Enter a name and a description for the IAM app. Keep **External App** as the **App Type**. - - ![Create business catalog 3](create_business_catalog_3_new.png) - -5. Click on next and select the transport request you created in a previous step. Click on **Finish**. - -6. In the newly created **IAM App**, enter the name of your **Launchpad App Descriptor Item** in the corresponding field and save ( **File** > **Save**). Then click on **Publish Locally**. - - ![Publish locally](publish_locally_new.png) ->Publishing the IAM App can take up to a couple of minutes. You can keep track of the process in the lower right corner of the ABAP Developer Tool in Eclipse. - -### Create a Business Catalog -Now that you have created the IAM App, you can create a Business Catalog and assign the IAM App to it. - -1. In the **IAM App**, click on the link **Create a new Business Catalog and assign the App to it**. - - ![Create business catalog 4](create_business_catalog_4_new.png) - -2. Enter a name and description. - - ![Create business catalog 5](create_business_catalog_5_new.png) - -3. Click next and select your transport request. Click on **Finish**. - -4. A new window will automatically pop up prompting you to create the Business Catalog App Assignment. Click on **Next**. - - ![Create business catalog 6](create_business_catalog_6_new.png) - -5. Select the transport request you used previously. Click on **Finish**. - -6. The generated IAM App, IAM App to Catalog Assignment and IAM Business Catalog will appear in your project folder. - -7. Double click on the IAM Business Catalog file to open it. Click on **Publish Locally**. - - ![Create business catalog 8](create_business_catalog_8_new.png) ->Publishing the Business Catalog can take up to a minute. You can keep track of the process in the lower right corner of the ABAP Developer Tool in Eclipse. ->Make note of your Business Catalog ID, you will need it in a later step. - -### Create a Business Role - -Now you need to create a Business Role in your SAP BTP ABAP Environment and then assign the Business Catalog to it. Any user in your SAP BTP ABAP Environment with this Business Role will have access to the shell plug-in. - -1. Access the Fiori Launchpad of your SAP BTP ABAP Environment. - -2. Search for the **Maintain Business Roles** application and open it. - - ![Create business role 1](Create_business_role_1.png) - -3. In the lower right corner, click on **New**. Enter a **Business Role ID** and a description. Click on **Create**. The Business Role will be created and will open automatically. - - ![Create business role 2](Create_business_role_2_new.png) - -4. In the **Assigned Business Catalogs** tab, click on 'Add' to add your Business Catalog. - - ![Create business role 4](Create_business_role_4_new.png) - - Search for your Business Catalog, select it and click on **OK**. - - ![Create business role 5](Create_business_role_5_new.png) - -5. In the **Assigned Business Users** tab, click on **Add**. - - ![Create business role 6](Create_business_role_6_new.png) - - Search for your user name, select it and click **OK**. - -6. In the **General Role Details** tab, change the value for the **Write, Read, Value Help** parameter to **Unrestricted**. Then click on **Save**. - -[Create business role 7](Create_business_role_7_new.png) - -### Test your Shell Plug-in - -You have successfully created an empty shell plug-in and deployed it to your SAP BTP ABAP Environment as part of a SAPUI5 Application. You have setup the IAM App, the Business Catalog and the Business Role. Any user with this Business Role will now see the shell plug-in in the user settings dialog: click on the user icon in the top right corner, and click on **Settings**. - -![Create business role 8](Create_business_role_8_new.png) - ->You might have to refresh the webpage for the shell plug-in to appear in the **Settings**. - -In the next tutorial, you will learn how to enrich your shell plug-in making use of OData Services. - -### Test Yourself diff --git a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project.png b/tutorials/abap-environment-shell-plugin/create_SAPUI5_project.png deleted file mode 100644 index 35a02d2e..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_2.png b/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_2.png deleted file mode 100644 index d6fd5bfd..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_3.png b/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_3.png deleted file mode 100644 index aee60905..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_3.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_4.png b/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_4.png deleted file mode 100644 index e3e0cb55..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_4.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_5.png b/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_5.png deleted file mode 100644 index fcda11d9..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_5.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_5_new.png b/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_5_new.png deleted file mode 100644 index c61c1810..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_5_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_6.png b/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_6.png deleted file mode 100644 index 8d3fdfb9..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_6.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_6_new.png b/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_6_new.png deleted file mode 100644 index d9da5844..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_6_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_7.png b/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_7.png deleted file mode 100644 index 803b82b8..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_7.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_7_new.png b/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_7_new.png deleted file mode 100644 index 0fde16e3..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_SAPUI5_project_7_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_1.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_1.png deleted file mode 100644 index d2fd17d7..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_1.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_1_new.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_1_new.png deleted file mode 100644 index d68a1ca7..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_1_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_2.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_2.png deleted file mode 100644 index cc48a62d..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_3.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_3.png deleted file mode 100644 index 83c96131..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_3.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_3_new.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_3_new.png deleted file mode 100644 index d8a32fb4..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_3_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_4.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_4.png deleted file mode 100644 index 31b25d9b..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_4.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_4_new.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_4_new.png deleted file mode 100644 index a51fc384..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_4_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_5.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_5.png deleted file mode 100644 index c4bbde01..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_5.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_5_new.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_5_new.png deleted file mode 100644 index 4fdc20e1..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_5_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_6.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_6.png deleted file mode 100644 index b5e9c2a2..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_6.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_6_new.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_6_new.png deleted file mode 100644 index b44ad968..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_6_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_7.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_7.png deleted file mode 100644 index c894ea72..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_7.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_8.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_8.png deleted file mode 100644 index 1829fa1a..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_8.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_business_catalog_8_new.png b/tutorials/abap-environment-shell-plugin/create_business_catalog_8_new.png deleted file mode 100644 index 7627d04a..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_business_catalog_8_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_dev_space.png b/tutorials/abap-environment-shell-plugin/create_dev_space.png deleted file mode 100644 index 3b6036ab..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_dev_space.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_new_package.png b/tutorials/abap-environment-shell-plugin/create_new_package.png deleted file mode 100644 index a8145460..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_new_package.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_new_package_2.png b/tutorials/abap-environment-shell-plugin/create_new_package_2.png deleted file mode 100644 index f1ca43a6..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_new_package_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_new_package_2_new.png b/tutorials/abap-environment-shell-plugin/create_new_package_2_new.png deleted file mode 100644 index f7ab34ae..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_new_package_2_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_new_package_3.png b/tutorials/abap-environment-shell-plugin/create_new_package_3.png deleted file mode 100644 index 8ef70a16..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_new_package_3.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_transport_request.png b/tutorials/abap-environment-shell-plugin/create_transport_request.png deleted file mode 100644 index d3d7eda9..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_transport_request.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/create_transport_request_new.png b/tutorials/abap-environment-shell-plugin/create_transport_request_new.png deleted file mode 100644 index 4712a1d2..00000000 Binary files a/tutorials/abap-environment-shell-plugin/create_transport_request_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/delete_controller_folder.png b/tutorials/abap-environment-shell-plugin/delete_controller_folder.png deleted file mode 100644 index ec38b663..00000000 Binary files a/tutorials/abap-environment-shell-plugin/delete_controller_folder.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/delete_view_content.png b/tutorials/abap-environment-shell-plugin/delete_view_content.png deleted file mode 100644 index d4874beb..00000000 Binary files a/tutorials/abap-environment-shell-plugin/delete_view_content.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/deploy_application.png b/tutorials/abap-environment-shell-plugin/deploy_application.png deleted file mode 100644 index 9afdfb80..00000000 Binary files a/tutorials/abap-environment-shell-plugin/deploy_application.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/new_ADT_files.png b/tutorials/abap-environment-shell-plugin/new_ADT_files.png deleted file mode 100644 index 2cd1f96a..00000000 Binary files a/tutorials/abap-environment-shell-plugin/new_ADT_files.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/new_ADT_files_new.png b/tutorials/abap-environment-shell-plugin/new_ADT_files_new.png deleted file mode 100644 index 1242e034..00000000 Binary files a/tutorials/abap-environment-shell-plugin/new_ADT_files_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/open_manifest_json.png b/tutorials/abap-environment-shell-plugin/open_manifest_json.png deleted file mode 100644 index 920b4179..00000000 Binary files a/tutorials/abap-environment-shell-plugin/open_manifest_json.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/open_terminal.png b/tutorials/abap-environment-shell-plugin/open_terminal.png deleted file mode 100644 index 26c5e21e..00000000 Binary files a/tutorials/abap-environment-shell-plugin/open_terminal.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/publish_locally.png b/tutorials/abap-environment-shell-plugin/publish_locally.png deleted file mode 100644 index 4673f81f..00000000 Binary files a/tutorials/abap-environment-shell-plugin/publish_locally.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/publish_locally_new.png b/tutorials/abap-environment-shell-plugin/publish_locally_new.png deleted file mode 100644 index 8109ce9b..00000000 Binary files a/tutorials/abap-environment-shell-plugin/publish_locally_new.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/transport_organizer.png b/tutorials/abap-environment-shell-plugin/transport_organizer.png deleted file mode 100644 index d96b8da3..00000000 Binary files a/tutorials/abap-environment-shell-plugin/transport_organizer.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/transport_organizer_2.png b/tutorials/abap-environment-shell-plugin/transport_organizer_2.png deleted file mode 100644 index 184e8eba..00000000 Binary files a/tutorials/abap-environment-shell-plugin/transport_organizer_2.png and /dev/null differ diff --git a/tutorials/abap-environment-shell-plugin/transport_organizer_2_new.png b/tutorials/abap-environment-shell-plugin/transport_organizer_2_new.png deleted file mode 100644 index 92501f00..00000000 Binary files a/tutorials/abap-environment-shell-plugin/transport_organizer_2_new.png and /dev/null differ