二维码

[教程] INTEGRATING COMPONENT INTO NAVIGATION BAR PROFILE

Twilight发表于 2016-01-17 03:07Twilight 最后回复于 2016-01-17 03:07 [复制链接] 4669 0

So far we displayed our UI component as independent. We just executed it and displayed it on the web ui. Let us integrate it into the navigation bar so that we can access it once log into the web ui.

Step1.
Go and create one inbound plug for the main window in your ui component.
navigation bar 1.jpg

Step 2.
Expose the main window of your component in the runtime repository as interface view.
navigation bar 2.jpg

Step3.
When we access our component from navigation bar or from any work center page, it will be displayed in the work area of UI. So to display any component in work area, we need register that component in the WORKAREA COMPONENT REPOSITORY.

Go to the SPRO and follow the below path.

Customer Relationship Management->UI Framework->Technical Role Definition->Define Work Area Component Repository. Click on New entries. Enter your component details as shown below and save them.
navigation bar 3.jpg

Select it and double click on the inbound plug. Click on New entries in the next screen and enter the following details.
navigation bar 4.jpg

TargeteId: you can enter any name. this targeted will be reused when we create logical link.
Inbound plug: this is the inbound plug that we created in window.

Next we have given UI object type and action display. Save the entries. We have registered our ui component.
Step4.

We need to create one logical link. Go to the following path in SPRO
Customer Relationship Management->UI Framework->Technical Role Definition->Define Navigation Bar Profile
Navigation Bar Customizing.jpg

In the next screen, choose the option DEFINE LOGICAL LINKS right left hand side panel and click on new entries.
Enter the details as below and save it.
navigation bar 5.jpg

Give appropriate name to your logical link.  Choose type as link. Give suitable title. This title value will be appeared on WEB UI.
Target id is the id that we have created in the previous step. From this target id,framework comes to know to which component it has to navigate when user clicks on any link.

Step5.
We need to decide for which business role this link has to be enabled. Then we need to add one entry in the DEFINE GENERIC OUTBOUND PLUG MAPPINS of the navigation bar profile of that selected business role. This is purely business requirement.

I am going to add it to the navigation bar profile that we have created in the starting tutorials.
.
In the same screen double click on Define Navigation Bar Profiles and choose the required navigation bar profile and click on Define Generic Outbound Plug Mappings.
navigation bar 6.jpg

Enter the following information and save it. logical link is the link that we created in previous step.
navigation bar 7.jpg

Step6.
Where we want to display the logical link. Here I want to display it on the service professional role – service contracts work center – second level navigation link.

we are repeating same steps which were discussed already in the starting tutorials.
What are the work centers assigned to the navigation bar profile.

Choose the required navigation bar profile and choose the option Assign Work Centers To Navigation Bar Profile.it will list all work centers. Here required work center is SRV-CONTR.
navigation bar 8.jpg

Next double click on Define Work Centers. In the next page,  find out the work center SRV-CONTR using the position button in the below. After finding it, select it and double click on‘Assign Work Center Link Groups To Work Center’ to know the work center link groups assigned to this work center.
navigation bar 9.jpg

Here required work center link group is SRV-CTR-SR.
navigation bar 10.jpg

We need to add our logical link to this group. So directly double click on the option ‘Assign Links To Work Center Link Group’. Give the work center link group that we found above in the next popup.
navigation bar 11.jpg

Below screen will be shown. Choose new entries to add our new logical link. Save the entries after adding the link.
navigation bar 12.jpg
navigation bar 13.jpg

We completed almost. We need to adjust this link at business role level. Go to the business role associated with the navigation bar profile. Follow the path below
Customer Relationship Management->UI Framework-> Business Roles-> Define Business Role.

In the next screen, choose the required business role , then double click on Adjust Work Center Group Links. Using the position button find out the entry.
navigation bar 14.jpg

After finding the entry, choose in Menu option, to make this link available in the second level navigation. If choose visible option also, then it will appear on the work center page under search group.
pop.jpg

Let us test the application. Login to the web ui with the business role to which we added the link.
navigation bar 15.jpg

After clicking on it, I navigated to the UI component that we made in our previous tutorials.
navigation bar 16.jpg
回复

使用道具 举报

快速回帖

本版积分规则
您需要登录后才可以回帖 登录 | 注册有礼

快速回复 返回顶部 返回列表