Technical Articles
DIY Home Page Card
In this blog, we will talk about Home Page Card. It supposed to be about Home Page Tile, however, in 1902 SAP introduced Home Page Cards. Tiles are staying till 1905 according to the recent release preview information.
From the perspective of the current blog, cards are the same as tiles. They are just rendered differently.
In 1811 release SAP introduced very nice thing as HTML or URL mashup tiles. Quite a powerful extension to the options we have to customize Home Page. But the topic I’d like to talk about is still not covered by SAP standard delivery.
This blog describes the solution to the question I raised myself quite some time back ago and which was not answered till recently: Custom Tile on Home page. Can we make a selection through parameters?
There are quite a few standard cards available to bring them on the home page. They are all under Filters group when we would go and use “Add Existing Cards”.
But how about our very own custom filter?
Since it’s not yet possible out of the box, I decided to go with DIY (do it yourself) approach. Long story short, I succeeded. And here I’d like to share with the Community step-by-step guide and walk through it.
How to create a custom card (aka custom tile) which would navigate a user to some OWL and apply any predefined selection (DefaultSet) immediately?
Let’s say I created a new query via master layout change in the Visits search page. I wanted it to be “My Visits Today In Progress”. I did it as Administrator user so the query is available to any user.
I assume the Reader is familiar with the process so far and we created the query successfully.
Creating a custom card for home page the standard way we can select Type as Floorplan. We need to give a title and a path.
We will use this Floorplan type of cards. But we need to properly compose the path and do one more trick.
The path needs to be in the following format:
$root-<WorkCenterPath>-<WorkCenterViewName>-<OWLName>::<Inport>::<DefaultSetName>
Let’s figure out where to get all those parameters from.
Some of these parameters need to be obtained with the help of our fellow developer.
<WorkCenterPath>
The developer needs to look into SDK UI Designer and find the Work Center you’d like to navigate to. In my case, it’s Visits Work Center.
The developer should provide you with the attribute of this Work Center called “Unique Id” or right click Work Center in Configuration Explorer and press “Copy ID”. And this is going to be our <WorkCenterPath> which for my case is /BYD_COD/SalesOnDemand/Visit/COD_Visit_WCF.WCF.uiwoc
or
<WorkCenterViewName>
Being in the same Work Center the developer needs to navigate to Work Center View we need. For example, clicking on WorkCenterView Path link or via Configuration Explorer. There we need to get “Name” of Work Center View.
<OWLName>
Staying in the same Work Center View, the developer needs to open OWL component embedded into this view and give you its name.
<InportName>
This is a bit tricky. We need to find which inport in OWL component will suit our needs. Usually, it would be some inport with the name like FromCODHomePage. I checked and OWLs used in Visits, Accounts, Appointments, E-mails, Phone Calls, Tasks, Leads, Tickets all have such an inport with the same name.
However, if it’s not there in your particular case, the inport we’re interested in would have one parameter with the binding to a data model field which in turn is used in “Active DefaultSet Binding”. Or alternatively, an event handler should be assigned to the inport which would also execute the passed defaultset somehow. In short, a bit of exploration might be required here. In the end, we should find the existing inport to pass default set to.
Here the example from Visits OWL.
We’re almost done with the Path. The last parameter left is
<DefaultSetName>
If we were after any standard DefaultSet (or DefaultSet created in UI Designer because the approach works for custom OWLs as well), we would grab DefaultSet name straight from UI Designer.
However, we’re after the DefaultSet (aka Query) created via master layout. Since anything created in master layout change mode is not reflected in SDK UI Designer, we’re leaving UI Designer aside.
Here we need to launch C4C UI in debug mode. How to do it? Please have a look at my other blog post: SAPUI5 and C4C. My (un)expected journey. Preparation.
Having UI running in debug mode (remember – we need some patience here because it may take some time to load), we need to navigate to our Visits Work Center then View. Being there we need to press Ctrl+click on the dropdown where we select any of predefined query to open Client Inspector. In the end, we need to get Client Inspector showing us AdvancedListPane (Control) in Control Tree as the first element.
Scroll down the control tree in Client Inspector till we see DefaultSets. DefaultSets with Stable Anchor are usually those which are coming from UI Designer. We’re looking for those DefaultSets which are without Stable Anchors. One of such DefaultSets is most likely to be the one we’re looking for. Once we select the DefaultSet in the control tree, on the right-hand side we’ll see its attributes. We’re looking for its “defaultSetName”.
DefaultSets created in the master layout have names which start with “$PersonalizedDefaultSet-“.
But how to identify exactly which is ours since there might be many custom queries created?
For this, switch to “Component Model XML” tab in Client Inspector and search for your query description. Then locate the name attribute in the DefaultSet tag where we found our description. In my case the default set name is $PersonalizedDefaultSet-MyTodayVisits-9b1b
Ok, we have all parameters and my path for custom card looks like:
$root-/BYD_COD/SalesOnDemand/Visit/COD_Visit_WCF.WCF.uiwoc-COD_Visit_WCVIEW-COD_Visit_OWL::FromCODHomePage::$PersonalizedDefaultSet-MyTodayVisits-9b1b
If you went and created a custom card right here with type Floorplan, providing Title and the Path similar to the above one, you would get an exception when trying to press such card. That’s because we haven’t finished yet.
Now here comes the trickiest part.
Out of the box, Floorplan card works only with a path to open a certain Work Center View. For example, the path below doesn’t produce an exception but opens Visits search page with default query.
/BYD_COD/SalesOnDemand/Visit/VisitExecution/COD_Visit_WCVIEW.WCVIEW.uiwocview (this is the Unique ID of the Visits Work Center View)
However, we want to open our exact query.
For this, we need to start to create a custom card, select the type as Floorplan, provide Title and the path with the DefaultSet we want to open. But don’t press Save yet!!
Then we need to open developer tools. I prefer to use Chrome Developer tools but it’s your choice. Remember, it’s important to be in UI debug mode (or in SAPUI5 debug mode with sap-ui-debug=true parameter in URL when launching UI). This has made the source code be loaded in an uncompressed format.
We search for _createNewTileCatalogObject in all files ( Ctrl+Shift+F will open the search view if it’s hidden). The result hopefully is like the below. Click the highlighted entry in PersonalizationPage-dbg.js and it will open us the source code. This is the function where a new tile object is created once we click Save.
We put a breakpoint right after the oCat object created (on oCat.ANY_DATA ….).
Now we hit Save button on “Create Custom Card” screen. The debugger is stopped at our breakpoint.
All we need to do here is to change oCat.NAV_OBJ_TYPE from FLOORPLAN to OWL_INPORT.
Notice that I did it in Scope-Local on the right-hand side rather than in Console. It’s not the part of this blog, but the change made in Console doesn’t work.
And then continue script execution with F8.
We’re all done! Publish the change to the Home Page and we’re good to go and test.
Now we have our DIY custom card which once pressed navigates us to the Visits Work Center View with configured predefined query created via master layout. And it’s available to any user. You as Administrator just need to assign the card to any business role and publish the home page changes.
Luckily, I don’t have any visits in progress for today. Yay!
If you want to show the number of found entries on such DIY card as it’s shown, for example, on “My Open Tasks” or “My Visits Today” cards, I have bad news for you. Currently, it’s not possible. SAP executes some backend services to get totals only for very limited predefined queries. Such as “My open tasks”. And unfortunately, there is no way to enhance this place as of now.
UPD 28/04/2019: In 1905 SAP introduced “My Filters” home page card. This card shows all current users’s saved queries.
UPD 10/05/2019: Troubleshooting tips
Since there were a few questions when something is not working in this approach, I thought it’d be good to provide some troubleshooting tips.
- Tickets’ “Path” should look like:
$root-/BYD_COD/ServiceOnDemand/AgentQueue/COD_SEOD_AGENT_QUEUE_WCF.WCF.uiwoc-SEOD_Ticket_MD_SADL_WCVIEW-SEOD_Ticket_SADL_OWL::FromCODHomePage::<DefaultSetName>
- Authorization
Please check if the Work Centre / Work Centre View is assigned to your business role. For example, there are 2 work centre views available for Tickets. The content of those work centre views is identical. But still, they are two different Work Centre Views and you need access to the one you’re trying to open.
- You’re getting an exception, which (in its details) says “Error: Http Status Code: 404: in $root-/BYD_COD/….”
The root cause for this message: most likely you haven’t changed NAV_OBJ_TYPE for your card from FLOORPLAN to OWL_INPORT during the creation.
Solution: please recreate the card changing NAV_OBJ_TYPE as described in the blog.
- You’re still getting an exception or you’d like to know more about the root cause of the above “404” exception.
In the Developer Tools search for NavigationHandler.navigate (it is in NavigationHandler-dbg.js file) and place a break-point towards the end of the function on the line:
} else if (mNavigationForObjType.hasOwnProperty(oCatalogItem.NAV_OBJ_TYPE)) {
Click your card on Home Page, stop at the break-point and check what you have in:
oCatalogItem.NAV_OBJ_TYPE (it needs to be OWL_INPORT)
oCatalogItem.NAV_OBJECT_ID (it is your Path)
You can press F10 then F11 and then you should be in NavigationHandler._openWCV function. This proves you’re on the right track. If any other function is called, then you have the wrong NAV_OBJ_TYPE. From NavigationHandler._openWCV you can continue debugging to find out how the navigation works in details.
Awesome. My client will be very happy with this DIY for My Work Tickets This Week. Thanks for the discovery.
Hi,
Were you able to apply this on Work Tickets screen ?
Work Tickets (COD_ServiceExecution_OWL) screen doesn't have any INPORTs, so what should be used in place of <InportName> ?
Thanks
More than great. Thanks for sharing this.
I tried this with tickets OWL in 1905 with:
/BYD_COD/ServiceOnDemand/AgentQueue/COD_SEOD_AGENT_QUEUE_WCF.WCF.uiwoc
SEOD_Ticket_MD_SADL_WCVIEW (tested SEOD_Ticket_SADL_WCVIEW as well)
SEOD_Ticket_SADL_OWL
FromCODHomePage
But it didn't work. Do you have an idea?
Hi Thorsten,
Glad you liked it.
I tried with 1905 already for tickets. It’s working with no issues.
What I’d suggest is to check which WCV do you have assigned in your role. It was the issue one of our colleagues was facing recently. He used SEOD_Ticket_MD_SADL_WCVIEW and this WCV resolved his issue.
Check please what you have in your business role.
Hi Andrei,
"numbers" SEOD_TICKETMD_SADL_WCVIEW and SEOD_TICKET_SADL_WCVIEW are assigned, but I think for Fiori SEOD_TICKETMD_SADL_WCVIEW is used.
I tried with
$root-/BYD_COD/ServiceOnDemand/AgentQueue/COD_SEOD_AGENT_QUEUE_WCF.WCF.uiwoc-SEOD_Ticket_MD_SADL_WCVIEW-SEOD_Ticket_SADL_OWL::FromCODHomePage::$PersonalizedDefaultSet-AllMessages-bdf1
but this brings not more than a dump. Hopefully only a little error in combining/doing? But I'm not able to figure out where it is. Even without debug-change, to even here from you description:
it shows the exeption.
Best regards
Thorsten
Hi Thorsten,
I just updated the blog with troubleshooting tips. Hoping it will help you. Let me know how it goes.
The quote you provided relates to the WCView path I mentioned right after the part you're quoting. The WCView path is different from the path to open "default query".
Hi Andrei Vishnevsky, Thorsten
I followed steps to create custom card for ticket owl, all looks good but when I click on custom card I get no response.
Hence I debugged to check if navigation path is correct, it looks good in below screenshot/
Later on further debugging js files, I found one error but I am unable to understand what it says. Error is as follow:
Please suggest if I missed anything.
Regards
Rituraj
Hi Andrei,
Can you please provide any suggestion on this?
Regards
Rituraj
Hi Andrei,
Thanks for sharing this.I tried with already for tickets. It’s working fine.But in custom BO OWL, it didn’t work. Whether to support this in custom BO owl view.
Best regards
I have solved it,thanks
Great!
Just for others benefit : you need to have a proper inport in OWL component which would accept one parameter which is default set name and execute it. Have a look how FromCODHomePage looks like in standard Owls.
Can you please let me know how did u solve that
yongyang li can you please share how you solved with custom BO OWL? thanks a lot!
Thanks for the blog
I could not find the event/method _createNewTileCatalogObject in the js files in Chrome debugger. I could see there are few 404 and 400 errors in the debgugger. could you please suggest me how to find the event and change the value in debug mode.
I am creating the custom tile for the Leads view for my custom saved Query “My Open Leads”
The path I am using:
$root-/BYD_COD/SalesOnDemand/Opportunity/UI/COD_Sales_WCF.WCF.uiwoc–COD_Mkt_Prospect–COD_Mkt_Prospect_SADL::FromCODHomePage::$PersonalizedDefaultSet-MyLeads-d25d
also I already set the debugMode=true in the URL of C4C
Thanks,
Sheshukumar Guntuka
Hi Sheshukumar,
What is the result of the search you’re getting when trying to search for _createNewTileCatalogObject ? Are you doing the search as described in the blog?
The complete path to PersonalizationPage-dbg.js file where the _createNewTileCatalogObject sits is:
https://c4cstatic.hana.ondemand.com/resourcesvc/<1905something>/SAP_UI/HTML5/resources/sap/client/m/hp/personalization/PersonalizationPage-dbg.js
Can you see this file?
Thank you Andrei Vishnevsky
I am not able to access the link you provided:-
what I am doing:-
I created Custom saved Query My Open Leads on Leads Object and want to link it from the Custom Tile and I am using below link to navigate
/BYD_COD/SalesOnDemand/Marketing/Prospect/COD_Mkt_Prospect_SADL.OWL.uicomponent::FromCODHomePage::$PersonalizedDefaultSet-MyLeads-d25d
as per your blog after adding it on the custom tile before save I opened Chrome developer tools and it has few errors already and I searched(CTL + SHIFT+F) for "_createNewTileCatalogObject" and there is no results.
So then I go to open file option and found the PersonalizationPage-dbg.js file but ther is no such method(_create*)
please refer the below screen shots:-
No method in the JS file
when do search no results found
Thanks,
It was not the link. It was the path in the Sources tab of developer tools. You should have substituted <1905something> with what you actually have in your current session because this part of the path is dynamic.
Don’t worry about errors in the console. There will be tons. Especially in debug mode.
Moving on. You’re not searching as described. Look at your last screenshot. You’re in the Console tab. You need to be in the Search tab which right after “What’s New” tab in your screenshot.
And one more stupid question: are you sure it is C4C system? Because I just checked and everything is there as required. However, the content of your PersonalizationPage-dbg.js looks completely different. Don't know where you've opened it from.
Hello Andrei,
If I set the debugging in fiori/RUI instead of HTML5 then it is working as.
Thanks
HTML5 should be forgotten since it's going to be deprecated 🙂
Hello Andrei,
Great blog 🙂
Do you think it is possible to navigate to a custom Workcenter that holds an Embedded Component instead of an OWL?
I tried to just remove the <InportName> and <DefaultSetName> from the URL but it didn't seem to work.
Many thanks.
Hi Michel,
Thanks
Yes, you can definitely navigate to your own WorkCentre view with an embedded component.
But I’d rather advise not to use any tricks described here but in your case go straight with the type “Floorplan” which is available during custom card creation. It’s designed exactly for your purpose. What you need to provide if you use “Floorplan” is the complete URL of your WorkCentre view. For example, /BYD_COD/SalesOnDemand/Visit/VisitExecution/COD_Visit_WCVIEW.WCVIEW.uiwocview is the URL for Visits WokrCentre view. You need to find out your custom WorkCentre view URL and you should be good to go.
You can still use the described OWL_INPORT type approach. However, it’s clear from its name it’s designed to open OWL with certain Inport. Thus not very convenient. If you go this way, then you’ll need to have an inport in your WorkCentre view. Then the URL will look like:
$root-<WorkCenterPath>-<WorkCenterViewName>::<Inport>
As you can see I removed OWLName and DefaultSetName as parameters. But Inport is still a must.
It worked for me with Visits again as an example:
“/BYD_COD/SalesOnDemand/Visit/COD_Visit_WCF.WCF.uiwoc-COD_Visit_WCVIEW::FromCODHomePage”
Cheers
Hi Andrei,
Thanks for sharing the great blog!!
Is it possible to add the counter on these custom tiles to show how many records the custom query holds ? For my requirement, showing a blank tile doesn't help the users unless it displays the total counts as well.
Thanks
Hi Fnu,
As I mentioned in the blog:
I just revisited it again in the system, and in 1908 there is still nothing new here. So the answer is no, not possible.
I just wanted to mention that it is brilliant 🙂 Thanks for this guide. Congratulations for actually figuring it out!
All the best!
Cheers,
Hi Andrei Vishnevsky ,
Thank you for the article.
Can this be applied to Custom Task Query?
The issue is with getting <WorkCenterPath>, as I can not get it for neither Tasks nor activities. So I tried to use $root-/BYD_COD/SalesOnDemand/Activities/Task/UI/COD_Task-COD_Task::FromCODHomePage::$PersonalizedDefaultSet-AllTasks-3de8
Unfortunately, tile with this root leads nowhere. It does not show any errors at all.
Nadya
Hi,
Thank you very much for the blog.
It works for me even in 1911.
But I need to show counter as well in the Tile.
Is it possible to show counter? if yes, kindly help..
Thanks and Regards:
Ritesh sharma
Hello Andrei,
I am facing after 2008 release the following issue: a standard tile ("my queue" for tickets) is still visible in iPad, Laptop but not on iPhone anymore. Did that ever happen to you? How to solve? I already opened an incident on this but I'm afraid it will take time...
Thanks and regards,
Alessandra
Hi Alessandra,
Unfortunately, I can't help you much here. I don't use any apple devices to access c4c app. And since it's a standard tile, the best would be to go for the official support.
Hi Andrei Vishnevsky,
Thank you for the post, really helpful.
Just I need to ask, is there a way to display the number of the query in DIY?.
I need to have the same way as KPI which display the Counter for Ticket's number and when drill down for the KPI it will display the Custom report created.
I have succeed to navigate to the Work Ticket view for my Custom Queries, but there is no Number Count the Ticket for this Queries displayed at the Tile.
Appreciate if you can help me on this.
Br,
Mohamed
Hi Mohamed,
I don't think anything changed in this area recently. So the statement I have in the blog is still relevant. It starts with the following and the rest is in the blog:
Hello Andrei!
Also thank you for sharing all these detailed contents! We were also able to use it for some of our projects.
I was wondering if you (or actually anyone) were trying to implement DIY cards for Utilities WCVs (such as Contract Account, Service Order or Premise).
We are facing the issue that for Contract Accounts, the implemented card works as smooth as expected, but for Premise, it does not.
I believe that we’ve done everything as suggested, since we don’t get any error message, but the card still does not navigate to the WCV.
Do you – or someone – have any experience according?
Thank you and Best Regards,
Gergely
I guess that the required inport is not implemented in the standard WCV . If so, I'd suggest to raise it with SAP. If they deflect, then well... bad luck.
Hi All,
Kindly refer to below screenshot if the custom card is still not working
Kindly change the floorplan to OWL_INPORT here in
Regards,
Raj Priya
Hello Andrei,
Perfect! Thanks for sharing this. We were able to add custom Home Page Cards 🙂 Is there any way to add counter to the cards? For instance in My Open Tickets cards it will also show us the number of the tickets in my open tickets query.
Hello Elif,
I'm glad it helped you.
Regarding your question: the answer is in the blog post. Starting from the words "If you want to show the number of found entries...". Nothing changed as far as I'm aware of.
Hello Andrei,
Thank you! One more question, is it possible to add OWL Link into the Mashups?
Html Mashup Floorplan
I tried and it didn't work, I may be missing something 🙂
I don't know the answer to your question
Hello Andrei.. great blog, thanks a lot!
One thought - we have a requirement to make it working for notifications. Not really sure, if it can work, but there is a default set, so 'd like to try. Problem is, I have OWL, but not WC and WCV.. would you know, is there some way, how to get this info?
Thanks a lot for any feedback, Jan
Hi Jan,
Custom WC/WCV then? That would include OWL you're talking about? I haven't done that myself. Just an idea. Cheers.
Hi Andrei,
yes, maybe can be worth to try.. but had another requirement earlier for navigate to calendar, where I was able to build full path with WC, WCV, OWL and query, but didn't work.. can you please let me know, have you ever tried on something else then Business Objects?
Thanks!
FYi you can get the c4c-default-set-name via the OData API following this SAP note:
https://userapps.support.sap.com/sap/support/knowledge/en/2923720
Much easier than plucking it from ui debugging.
There's even easier way. Simply navigate in the adaptation mode to the chosen query (must be in debugging mode)
It's in the Details section