Add Mobile Cards as a Today Widget to your iPhone
On the iPhone there are these Today widgets. These widgets are things like the Weather, News, Siri Suggestions, and more. You can add multiple widgets so that they are displayed on your lock screen, or when you scroll from top to bottom on your home screen. There is a feature in Mobile Cards that allows you to add cards to these screens, it allows you to add Mobile Cards as a Widget.
Why would you do this? If you are familiar with Mobile Cards it has the ability to connect to any backend with a REST service. With this, you can create cards that have all kinds of information on those cards. In these Today Widget’s the idea is to give you the most important information that you want to know about today. With Mobile Cards you can think about displaying information like Daily Sales Performance Numbers, Product Update Information, Newsfeeds from different content stacks or go as simple as Daily Lunch Menus. The ideas are endless in what you want to display here.
Keep in mind the information that is displayed here is relatively short, it gives you the necessary information to then decide if you want to drill in deeper. You’ll have a title, a description that is about 25 words or so and if you chose, a picture.
All this sounds great, right? So how can you enable this for your company?
I’ll assume some general knowledge of Mobile Cards as I have written a few blogs on it and so have many others, so if you need to get started see some of my links at the bottom of this page.
Lets start by creating a new card. We are going to use a Sample Product Template for this, but you’ll see that you can easily use any of your cards in this scenario. Create a card and Name it what you’d like, in this example I’ve named it Today Screen Extensions. From the Template Source, select Template Manager and then in the HTML Template chose Sample Product Template.
Now we need to change a few things.
Card Template: Automatic Instance Generation
Collection Handling: Use Collection
Query URL Collection Root: $.d.results
Query Entity Key Paths: $.d.__metadata.uri
Query Refresh Mode: Keep up-to-date
The trick to letting a card to show it’s data in the Today Widget are the three parameters. Note that on the TodayExensionImage you can define this as an image stored in the Assets section as well, many companies may chose to add their company logo here. To do that you would enter in ./imagefilename as the value where imagefilename is the name of the file stored in the Assets.
Save the card. Before you subscribe you should check your Client Polices to enable Spotlight. This is a requirement for the Widget. If you do not enable this feature you will see the following when enabling the widget. The text will read “Your system administrator has disabled this widget.
To make sure this doesn’t happen, chose Client Polices from the SAP Mobile Cards screen.
In the Feature Restriction Policies use the pencil icon to Edit the Plugin
Select Allowed for this policy.
Press OK and then make sure you select save for the Feature to take affect.
Go to your Mobile Cards app and Subscribe the the Today Screen Extension Card and make sure the new cards show up. You should see three cards created as we used the top=3 filter in the query url.
To enable the Widget pull down from the top of the screen to the bottom of the screen to bring up the Today Screen. You may need to scroll left or right to bring up the screen with the Widgets on it. Scroll to the bottom of the screen and you’ll see an Edit button. You’ll then see the Add Widgets screen. Scroll down till you see Mobile Cards and then press the + button. Once added you can move the widget location for the order you want it to appear. Press Done and the Widget will be there.
You’ll now see Mobile Cards and you’ll see the latest card listed. To show all three cards press the Show More. You can press on any of the cards and it will take you into the Mobile Cards app specifically to that card so that you can see more details.
To configure more cards take a look at some of these links, there are many examples these are only a few to get you started.
Enable Purchase Order Approvals with Mobile Cards
Build Cards from Fiori Applications
Enable Unified Inbox for Mobile Cards
Mobile Cards Interactive Tutorials
Mobile Cards with Success Factors
Hey Mark, very good article, thanks for sharing !
Great to see how this piece of our innovation toolbox is evolving and showing the power of our mobile development capabilities.
Keep on with your inspiring work please.