Skip to Content

Solution Overview:

SAP Cloud Platform Mobile Services now includes a mobile card kit.  It is an easy to use tool for micro app generation on iOS and Android. The tool provides companies a solution to create “no code” and “low code” micro apps in hours, not months. Mobile Card kit can mobilize data from any system that is accessible via REST so there are low barriers to getting started. A single SAP Mobile Cards app can have cards coming from many different SAP & non-SAP based systems.

Sample use cases for SAP Mobile Cards:

  • Companion micro apps that reference a report or a KPI that may be in a larger purpose built app
  • Quick reference apps
  • Lightweight simple apps. If you are thinking of an app that may fit 1-2 screens, it’s likely SAP Mobile Card kit is a great fit.
  • Company message cards (e.g. – building / campus information cards, HR deadlines, company events, etc)
  • Micro apps for lean process workflows. BTW – we also have a pre-built card to support the UWL/SAP Inbox

No iOS or Android development experience necessary. End users download the SAP Mobile Cards app from the public app stores and then deploy these lightweight micro-apps directly into the app. End users can enjoy this live & interactive, digital wallet experience for business. Users are notified when important stuff happens and the content is available all of the time.

How to Enable Purchase Order Approval for mobile card kit:

With mobile card kit you can enable multiple scenarios, here I’m going to show you how you can enable Purchase Order Approvals.  This will take you through how to do this in the SAP Fiori Trial environment where one of the Fiori Apps that exist there is Approve Purchase Orders.  If you are doing this in your environment it will be a similar setup, however you may need to make some changes depending on the data that you are returning and what customization you have done.  You should be able to take a similar approach to enabling scenario’s like Shopping Cart Approval, or Leave Request Approval, Purchase Contract Approval etc.  Check out Michael Van Cutsem’s Blog about doing similar for Leave Request. https://blogs.sap.com/2018/04/16/sap-mobile-cards-building-cards-from-fiori-applications/

Additionally many of these above mentioned scenario’s may be enabled via the unified inbox in Fiori.  If this is the case you can follow this tutorial to enable Mobile Cards for Unified Inbox.  https://www.sap.com/developer/tutorial-navigator/mobile-interactive-tutorials/content2go/intermediate/unified-inbox-card.html

Get the JSON for Purchase Order Approval in Fiori Trial:

First register for an account with the SAP Fiori Cloud Demo at https://www.sapfioritrial.com/   Once you have gone there, select “See it in action” and then you’ll want a defined launchpad so select the “Customize and Extend” option, and then select “Get Started”.  You’ll want to login with the same user and password that you will be using in the SAP Cloud Platform environment.  If you are using an SAP Cloud Platform account make sure you have “Development & Operations” under Mobile Services enabled.  You can use std or preview.

If you do not have an SAP Cloud Platform account you can sign up for a trial here, https://account.hanatrial.ondemand.com/ which will enable you with the Development & Operations service.

Now you should have an SAP Fiori Launchpad and under Logistics (MM) group you will see Approve Purchase Orders.  If it shows 0 orders, it will refresh with orders over time.

Once you have that setup, lets grab one thing that we need that is based on your launchpad.  With Mobile Cards we use the JSON that is returned based on the REST query to determine how the data is formatted.  To get your JSON document run the following query in the browser window but change the first part of the URL to match your Fiori Launchpad URL, if using the Fiori Trial you should only need to replace the x’s with your identifier.  If you are doing something other than Fiori Trial and PO Approval you can use the Developers Tools in Chrome and in the Network XHR trace you will find the URL that is used to return your list, Michael goes into more details on this in his blog mentioned above.

https://fiorilaunchpad-xxxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/WorkflowTaskCollection?$skip=0&$top=1&$orderby=WiCreatedAt%20desc&$inlinecount=allpages&sap-client=001&$expand=HeaderDetails/ItemDetails&$format=json

This will create a JSON result in your browser with the data of one purchase order by using the top=1 filter.  You’ll want to save this output as a JSON document.  Once saved you will want to modify the JSON document so that it does not have the results array in it.  Open the JSON document in your editor and remove the text

"results":[
{

at the top of the document and the corresponding close brackets at the end of the document.

}
]

We do the above because we want to return a single card for each purchase order.  If the JSON document has an array of these the cards will not get created correctly.  There is a results array in this returned JSON in order for us to loop through the items that are returned for each PO, we leave that array in tact.

You should end up with a JSON document that is very similar to the following.  You can use the following JSON as well, however if you have made any changes or are using an environment that is not Fiori Trial the JSON may be different.  The above method gives you the JSON for your account.

{
    "d": {
        "__metadata": {
            "id": "https://fiorilaunchpad-xxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/WorkflowTaskCollection(SAP__Origin='EC3_800',WorkitemID='000002629726')",
            "uri": "https://fiorilaunchpad-xxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/WorkflowTaskCollection(SAP__Origin='EC3_800',WorkitemID='000002629726')",
            "type": "GBAPP_POAPPROVAL.WorkflowTask"
        },
        "SAP__Origin": "EC3_800",
        "WorkitemID": "000002629726",
        "TaskType": "TS20000166",
        "PoNumber": "4500049352",
        "PoNumberFormatted": "4500049352",
        "WiCreatedAt": "\/Date(1524244623000)\/",
        "ForwardedByID": "",
        "ForwardedByName": "",
        "SubstitutingForID": "",
        "SubstitutingForName": "",
        "CreatedByID": "PURCHASER",
        "CreatedByName": "Paula Purchaser",
        "Value": "1500.00",
        "Currency": "EUR",
        "SupplierID": "3701",
        "SupplierName": "eSupplier, Inc",
        "ItemDescriptions": "Portable DVD RW",
        "SearchForText": "",
        "HeaderDetails": {
            "__metadata": {
                "id": "https://fiorilaunchpad-xxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/HeaderDetailCollection(SAP__Origin='EC3_800',PoNumber='4500049352')",
                "uri": "https://fiorilaunchpad-xxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/HeaderDetailCollection(SAP__Origin='EC3_800',PoNumber='4500049352')",
                "type": "GBAPP_POAPPROVAL.HeaderDetail"
            },
            "HeaderInfo": {
                "__metadata": {
                    "type": "GBAPP_POAPPROVAL.HeaderInfo"
                },
                "AccountCategoryDescription": "",
                "AccountNumber": "",
                "AccountDescription": "",
                "GlAccountNumber": "",
                "GlAccountDescription": "",
                "CumulatedAccountingTypeCode": "0",
                "CumulatedAccountingTypeCodeName": "No Assignment",
                "CostCentre": "",
                "CostCentreIndicator": "",
                "CostCentreDescription": "",
                "WBSElement": "",
                "WBSElementIndicator": "",
                "WBSElementDescription": "",
                "Network": "",
                "NetworkIndicator": "",
                "NetworkDescription": "",
                "Order": "",
                "OrderIndicator": "",
                "OrderDescription": "",
                "SalesOrder": "",
                "SalesOrderItem": "0",
                "SalesOrderScheduleLine": "0",
                "SalesOrderIndicator": "",
                "SalesOrderDescription": "",
                "Asset": "",
                "AssetSubNumber": "",
                "AssetIndicator": "",
                "AssetDescription": ""
            },
            "SAP__Origin": "EC3_800",
            "WorkitemID": "000002629726",
            "PoNumber": "4500049352",
            "PoNumberFormatted": "4500049352",
            "WiCreatedAt": "\/Date(1524244623000)\/",
            "ForwardedByID": "",
            "ForwardedByName": "",
            "SubstitutingForID": "",
            "SubstitutingForName": "",
            "PaymentTerm": "0002",
            "PaymentTermDescription": "",
            "Incoterm": "CPT",
            "IncotermDescription": "Freight-free",
            "IncotermLocation": "FOB",
            "CompanyCode": "1000",
            "CompanyCodeDescription": "BestRun Germany",
            "CreatedByID": "PURCHASER",
            "CreatedByName": "Paula Purchaser",
            "NumberOfNotes": 1,
            "NumberOfAttachments": 0,
            "Value": "1500.00",
            "Currency": "EUR",
            "SupplierID": "3701",
            "SupplierName": "eSupplier, Inc",
            "NumberOfItems": 1,
            "Plant": "1000",
            "PlantName": "Werk Hamburg",
            "DeliveryDate": "\/Date(1524441600000)\/",
            "DeliveryDateAlsoLater": "",
            "ItemDetails": {
                "results": [
                    {
                        "__metadata": {
                            "id": "https://fiorilaunchpad-xxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/ItemDetailCollection(SAP__Origin='EC3_800',ItemNumber='00010',PoNumber='4500049352')",
                            "uri": "https://fiorilaunchpad-xxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/ItemDetailCollection(SAP__Origin='EC3_800',ItemNumber='00010',PoNumber='4500049352')",
                            "type": "GBAPP_POAPPROVAL.ItemDetail"
                        },
                        "LimitDetails": {
                            "__metadata": {
                                "type": "GBAPP_POAPPROVAL.LimitDetails"
                            },
                            "LimitDescription": "",
                            "IsValueUnLimited": "",
                            "ValueLimit": "0.0",
                            "ExpectedValue": "0.0",
                            "Currency": ""
                        },
                        "ProductDetails": {
                            "__metadata": {
                                "type": "GBAPP_POAPPROVAL.ProductDetails"
                            },
                            "ItemType": "M",
                            "MaterialID": "DPC2013",
                            "MaterialGroupDescription": "Drives",
                            "MaterialGroup": "00209"
                        },
                        "DeliveryAddress": {
                            "__metadata": {
                                "type": "GBAPP_POAPPROVAL.DeliveryAddress"
                            },
                            "Plant": "1000",
                            "PlantName": "Werk Hamburg",
                            "CustomerId": "",
                            "CustomerName": "",
                            "AddressString": "Alsterdorfer Strasse 13, 22299 Hamburg-Alsterdorf, Germany"
                        },
                        "SAP__Origin": "EC3_800",
                        "ItemNumber": "00010",
                        "PoNumber": "4500049352",
                        "ItemNumberFormatted": "10",
                        "PoNumberFormatted": "4500049352",
                        "ItemCategory": "0",
                        "ItemCategoryDescription": "Standard",
                        "Description": "Portable DVD RW",
                        "Blocked": "",
                        "Unit": "PCE",
                        "UnitDescription": "Piece",
                        "Quantity": "10",
                        "Value": "1500.00",
                        "Currency": "EUR",
                        "PricePerUnit": "150.00",
                        "CurrencyForPPU": "EUR",
                        "QuantityForPPU": "1",
                        "UnitForPPU": "PCE",
                        "UnitForPPUDescription": "Piece",
                        "DeliveryDate": "\/Date(1524441600000)\/",
                        "DeliveryDateAlsoLater": "",
                        "Incoterm": "",
                        "IncotermDescription": "",
                        "IncotermLocation": "",
                        "NumberOfNotes": 1,
                        "NumberOfAttachments": 0,
                        "NumberServiceLines": 0,
                        "ServiceLines": {
                            "__deferred": {
                                "uri": "https://fiorilaunchpad-xxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/ItemDetailCollection(SAP__Origin='EC3_800',ItemNumber='00010',PoNumber='4500049352')/ServiceLines"
                            }
                        },
                        "Limits": {
                            "__deferred": {
                                "uri": "https://fiorilaunchpad-xxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/ItemDetailCollection(SAP__Origin='EC3_800',ItemNumber='00010',PoNumber='4500049352')/Limits"
                            }
                        },
                        "PricingConditions": {
                            "__deferred": {
                                "uri": "https://fiorilaunchpad-xxxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/ItemDetailCollection(SAP__Origin='EC3_800',ItemNumber='00010',PoNumber='4500049352')/PricingConditions"
                            }
                        },
                        "Attachments": {
                            "__deferred": {
                                "uri": "https://fiorilaunchpad-xxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/ItemDetailCollection(SAP__Origin='EC3_800',ItemNumber='00010',PoNumber='4500049352')/Attachments"
                            }
                        },
                        "Notes": {
                            "__deferred": {
                                "uri": "https://fiorilaunchpad-xxxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/ItemDetailCollection(SAP__Origin='EC3_800',ItemNumber='00010',PoNumber='4500049352')/Notes"
                            }
                        },
                        "Accountings": {
                            "__deferred": {
                                "uri": "https://fiorilaunchpad-xxxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/ItemDetailCollection(SAP__Origin='EC3_800',ItemNumber='00010',PoNumber='4500049352')/Accountings"
                            }
                        },
                        "Components": {
                            "__deferred": {
                                "uri": "https://fiorilaunchpad-xxxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/ItemDetailCollection(SAP__Origin='EC3_800',ItemNumber='00010',PoNumber='4500049352')/Components"
                            }
                        }
                    }
                ]
            },
            "Attachments": {
                "__deferred": {
                    "uri": "https://fiorilaunchpad-xxxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/HeaderDetailCollection(SAP__Origin='EC3_800',PoNumber='4500049352')/Attachments"
                }
            },
            "Notes": {
                "__deferred": {
                    "uri": "https://fiorilaunchpad-xxxxxxxxx.dispatcher.us1.hana.ondemand.com/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/HeaderDetailCollection(SAP__Origin='EC3_800',PoNumber='4500049352')/Notes"
                }
            }
        }
    }
}

Configure the Card:

In Mobile Services the first thing you need to do is add the destination to your Fiori Trial Launchpad.  From Mobile Services, select SAP Mobile Cards from the Mobile Applications menu and then select Connectivity from the Assigned Features list.

Form the Connectivity screen use the create icon in the top right hand corner above the list of destinations to create a new destination.

When entering the URL make sure it is your URL, do not use the xxx’s per the example.  You should only need to set the following three entries and leave everything else as a default.

Type: Mobile Destination

Destination Name: FioriTrial

URL: https://fiorilaunchpad-xxxxxxx.dispatcher.us1.hana.ondemand.com

Now that you have the destination, select SAP Mobile Cards from the menu and then select the create icon to Create a New Card

We will use the Template Manager to import a card template that is similar to our needs.  From the Template Manager, scroll down and find the “Sample Unified Inbox Card”  and select the Create New Card Icon

We need to change a few things in order to match our Purchase Order app as this template was defined to be used for the Unified Inbox.  Make the following changes.

Name: PO Approval

Destination: FioriTrial

Card Type: Automatic Instance Generation

Query: /sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/WorkflowTaskCollection?$skip=0&$top=10&$orderby=WiCreatedAt%20desc&$inlinecount=allpages&sap-client=001&$expand=HeaderDetails/ItemDetails&$format=json

 

Collection Handling: Use Collection

Query URL Collection Root: $.d.results

Query Entity Key Paths: $.d.__metadata.uri

Query Refresh Mode: Keep up-to-date

Description: PO Approval – Query Based Collection Only

Parameter Name – SupplierName

$.d.SupplierName

Parameter Name –  PoNumber

$.d.PoNumber

Select the Sample Data option and then either copy and paste your JSON from above into the Data section, or use the browse button to find your JSON File, you should then have the following

Select Editor.  In the HTML section copy and paste the following HTML.  You can modify the HTML for your design as needed at any time.

<div id="mySimpleTemplate" class="myTemplate" data-type="text/x-handlebars-template">
    <div class="header" style="height: 30px">
        <div style="text-align: left;">
            <span style="font-weight: bold; font-size: 24px; float: left; color: #ffffff; display: inline; padding-top: 8px">
                Purchase Order Approval
            </span>
        </div>
        <div style="text-align: right;">
            <span style="float: right; display: inline; font-size: 17px; color:#CEDDEC; padding-top: 5px">
                {{Value}}
            </span>
        </div>
        <div style="text-align: right;">
            <span style="float: right; clear: right; display: inline; font-size: 11px; color: #fafafa; padding-top: 4px">
                {{Currency}}
            </span>
        </div>
    </div>
    <div class="card-content">
        <div class="listitem">
            <div class="listitem-label">
                <span>
                  Supplier Name
                </span>
            </div>
            <br>
            <div class="listitem-value">
                <span>
                    {{SupplierName}}
                </span>
            </div>
        </div>
        <div class="listitem">
            <div class="listitem-label">
                <span>
                    Created By
                </span>
            </div>
            <br>
            <div class="listitem-value">
                <span>
                    {{CreatedByName}}
                </span>
            </div>
        </div>
        <div class="listitem">
            <div class="listitem-label">
                <span>
                    Plant Name
                </span>
            </div>
            <br>
            <div class="listitem-value">
                <span>
                    {{PlantName}}
                </span>
            </div>
        </div>
        <div class="listitem">
            <div class="listitem-label">
                <span>
                    Company Code Description
                </span>
            </div>
            <br>
            <div class="listitem-value">
                <span>
                    {{CompanyCodeDescription}}
                </span>
            </div>
        </div>
        <div class="listitem">
            <div class="listitem-label">
                <span>
                    DeliveryDate
                </span>
            </div>
            <br>
            <div class="listitem-value">
                <span>
                    {{DeliveryDate}}
                </span>
            </div>
        </div>
        <br>
        <br>
        <div class="listitem">
            <div class="listitem-label">
                <span>
                    Items in Purchase Order
                </span>
            </div>
            <br>
        </div>
        {{#each ItemDetails.results}}
        <div style="clear:left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
            <span style="float:left; width:40%; text-align:left; font-weight:bold; white-space:nowrap">
                Description: {{Description}}
            </span>
            <br>
            Category: {{ItemCategoryDescription}}
            <br>
            Quantity: {{Quantity}}
            <br> 
            Price Per Unit: {{Value}}&nbsp;{{CurrencyForPPU}}
            <br>
        </div>
    {{/each}}
    </div>
</div>

 

Once you have done that if you select any of the menu buttons, like Assets and then go back to Editor you should see the changes reflected and should find something similar to this

Make sure the Data Mapping is correct.  Select the Data Mapping menu option and make sure the settings match, most likely the only change you’ll have to make is to change the format of the DeliveryDate.  You will see that there is a section for ItemResults, this is an array of items that we will loop through that are part of the Purchase Order, that way we can put on the card each item in the purchase order.  Another approach to the design may be to put the items on the back of the card, in this tutorial everything is on the front of the card.

Value: d.Value

Currency: d.Currency

SupplierName: d.SupplierName

CreatedByName: d.CreatedByName

PlantName: d.HeaderDetails.PlantName

CompanyCodeDescription: d.HeaderDetails.CompanyCodeDescription

DeliveryDate: d.HeaderDetails.DeliveryDate MM/dd/yyyy

ItemDetails.results: d.HeaderDetails.ItemDetails.results

Description: Description

ItemCategoryDescription: ItemCategoryDescription

Quantity: Quantity

Value: Value

CurrencyForPPU: CurrencyForPPU

 

In order to Approve or Reject the PO we need to create the actions.  Select Actions and you will see two actions defined, ACCEPT and REJECT.

Change the XCSRF Token URL to the Query URL found in the Info section.  You don’t need the entire URL with the filter, etc, it should be similar to:

/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/

Similar to how you found the JSON for the PO Approval list, using the Debug Console in your browser get a network trace of when you approve a PO.  You will see a POST command in the XHR.  The Request URL is what will be used to send the Approve scenario.  Keep in mind, this may be implemented differently in your environment.  There will likely be a POST URL, but in some cases you may see a Body that is sent with the POST, you will need to take the JSON of the Request Body and put it in the Action Body in SAP Mobile Cards when defining the action.  You may also need to include the Request Header content-type with a value application/json.

 

Change the URL for the ACCEPT action which you just got from the network trace.  You will need to make it so the URL accepts parameters.  In this case we need to change the WorkitemID and the Comment to take inputs.  The WorkitemID is given to you by the Query URL, so we will pass in ${ID2}, ID1 is the Origin which we hard code in this case.  We then want to send in the input from the comment section.  Here we have defined a Parameter called comments.  If you are copying and pasting the URL below pay attention to the single quotes as you will get an invalid URL if you don’t change them after pasting.

/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/ApplyDecision?SAP__Origin=’EC3_800’&WorkitemID=’${ID2}’&DecisionKey=’0001’&Comment=‘${comments}’

For the REJECT action we use the same URL but change the DecisionKey to 0002

/sap/fiori/uis2pmmpurchorderapprove/sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/ApplyDecision?SAP__Origin=’EC3_800’&WorkitemID=’${ID2}’&DecisionKey=’000’&Comment=’${comments}’

 

 

Last change we make is going into the Notifications and change the New Card Notification to match up with the changes we made in the Info section.  We will pass in the SupplierName and the PoNumber in this case so that a notification is shown with that information.

A new item is ready for your approval in your Inbox: ${SupplierName} – ${PoNumber}

Press Save and now you should have a Card Type of PO Approval in your list.  We now want to make sure the card will show up successfully.

You should have SAP Mobile Cards installed on your device.  If you have not already connected and registered to your environment select the API’s menu and then using the camera on your iPhone or Android scan the QR code, which will open up the SAP Mobile Cards app and start the registration process

Once you are registered you will need to subscribe to the card.  In the top right hand corner select the + sign in a circle.  Select the All option and then you will see the PO Approval. Select that and then select Subscribe.  Once you are subscribed you can go back to the home screen and the PO Approval cards should be available, in this case we should see 10 cards of 10 approvals are available as that is what we set our query to retrieve using top=10.  You should be able to perform an action on the select Purchase Order and when new Purchase Orders are added you will receive a notification.

 

To report this post you need to login first.

22 Comments

You must be Logged on to comment or reply to a post.

  1. Rajkumar Shanmuganathan

    Hi,

    Nice article!! Whenever I created the Automatic Instance Generation card type and saved it, I’m unable to edit it again, did you face this issue?

     

    Thanks,

    Raj.

    (0) 
    1. Mark Wright Post author

      Yes this is a known issue that has been fixed.  If you create a card based on a Template via Template Manager, or you import a card via a zip you will not face that issue, only starting a card from scratch you will face this issue.  You should see this resolved soon.  Many of the cards in the Template Manager are Automatic Instance Generation cards and are good starting points for different scenario’s.

      (1) 
  2. Rajkumar Shanmuganathan

    Hi Mark,

    Thanks for your valuable information, will try to create with your suggested way. We started building cards with the help of Sami Lechner  who gave us wonderful insight on how to start with while he was around our campus.

    Another issue we are facing is, we are trying to re-use the mobile destinations that we created for iOS SDK that works with backend authentication(BASIC authentication with LDAP connection to the on-premise) unfortunately, we are unable to connect the existing destinations for creating the mobile cards. So, as a temporary solution to start, created new mobile destination with the service user name and password hardcoded( i know it’s not a recommended approach). Please let us know if there is any alternate way to resolve this issue as well.

    Thanks,

    Raj.

    (0) 
    1. Sami Lechner

      thanks Raj

      I am just about to update the tutorials so stay tuned for new content. by the way I have this one also coming 😉

       

      Sami

      (1) 
    1. Mark Wright Post author

      I’ve looked in several different types of accounts and only see the latest Templates.  What region is your account in, are you using Preview, Trial, Standard for the Development and Operations service?

      (0) 
        1. Mark Wright Post author

          Some of the environments may not have gotten the new templates pushed out, there should be a refresh in the next couple days to get new templates out to the environments.

          (0) 
          1. Alok Navare

            Hi Mark,

            I don’t find  “Sample Unified Inbox Card” template either. I am using Neo Trial(Rot) account. Can i use a different template?

            (0) 
  3. Mark Wright Post author

    I hope that the templates will be available soon, in the mean time the only thing I can offer is additional code that gets you up and going.  You will need to create the card yourself instead of using the Template Manager you’ll and a Create Mobile Card and you will also need to create the Actions.  The key missing parts that cannot be found in this blog are the CSS which you add in the Editor,  and some missing entries for the Actions.  Here is the CSS, you have the HTML above

    .myTemplate {
    height: 736px;
    background: linear-gradient(to bottom,#3C607C,#6693B0);
    color: #CEDDEC;
    font-family: Helvetica;
    }
    
    .header {
    background-color: #none;
    height: 40px;
    padding: 16px;
    }
    
    .card-content{
    padding: 16px;
    }
    
    .listitem {
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    background-color: none;
    height: 40px;
    padding-top: 18px;
    line-height: 18px;
    }
    
    .listitem-availability{
    font-size: 17px;
    color:#BEDAC3;
    font-weight: bold;
    float: left;
    padding-right: 16px;
    }
    
    .listitem:first-of-type {
    
    }
    
    .listitem-label {
    float: left;
    
    }
    
    .listitem-value {
    color: #fafafa;
    font-size: 17px;
    float: left;
    padding-right: 16px;
    }
    

    In the Actions you will have to add the Request Header for both Approve and Reject

    Name: X-Requested-With

    Value: XMLHttpRequest

    Also add a parameter

    Name: comments

    Label: Comments

     

    Everything else to create the card is in this blog, it will just have to be entered in manually instead of being pre-filled when importing a template.

    Note, that if I could add attachments Mobile Cards can import templates that have been exported, however I cannot supply that zip export in this forum.

    I will delete this comment once the new templates are verified to be in the environments.

    (1) 
    1. Alok Navare

      Hi Mark,

      I did get the template. I have configured based on the steps mentioned however, i do not get any cards on my mobile. Any hint on what could be wrong?

      (0) 
      1. Mark Wright Post author

        I have in the past seen that in Fiori Trial there are no purchase orders and you need to wait for the system to refresh and put new purchase orders into your account, this is the easiest thing to check of course.

        Did you change the JSON, or did you copy and past the JSON that is in the blog per above?  If the JSON is not correct, we would need to take a look at that because what may be happening is the card cannot be created based on the format from the JSON itself.

        You can also do a Network Trace to find out if the data is being returned.  In the Mobile Services cockpit you can go to Analytics and then chose Network Trace.  Press the Purge Now button and then Start Recording.  From the mobile cards client, unsubscribe and then subscribe.  If it shows No Cards, go and press Stop Recording.  Download the HAR file and open it in a text editor.  You will be able to see the results and it will tell you if you are getting an error getting the data, or it will show you a response of 200 and should show you the json response with the data.  This will tell us more if it’s the card creation or access to the data that is causing the problem.

        (1) 
        1. Alok Navare

          Thanks for sharing debugging steps that really helped.There was an issue with the json due to which it wasn’t correctly displaying cards. I am able to view the cards now. There is however one thing which i have observed : the push from SCP to device is not very consistent, any thoughts on that?

          (0) 
          1. Mark Wright Post author

            That’s excellent, I am glad you were able to determine the issue.  Can you expand on what you mean by not very consistent?  If you are using the Fiori Trial Purchase Orders it does kind of have a mind of it’s own.  It does a refresh of PO’s in order to keep data fresh.  I don’t actually know the timing or anything about that. What I see happening in my account is that the PO’s will be removed completely, at that time no PO’s exist in the App on Fiori, then at some random time it will add PO’s, seemly a random number of them, this will then trigger a push of all the new PO’s.  This may be what you are referring to and I don’t have any control of that really.  In a production environment it will work like this.  If your backend supports the “top” filter in the oData query we will fetch that many PO’s, say top=10, if you don’t set the top filter we will use the configuration that says 20, this is the default that can be changed.  When you accept or reject a PO, we will go get a new PO in it’s place.  If you send the Accept and it takes a bit to process, you may get a new notification that says you have a new PO.  Depending on what you configure in the card, we will either keep the PO’s “Up to Date” or you can schedule a fetch, this is done in the info section of the cards.

            Hope this helps?

            (1) 
            1. Alok Navare

              ” If you are using the Fiori Trial Purchase Orders it does kind of have a mind of it’s own.  It does a refresh of PO’s in order to keep data fresh.  I don’t actually know the timing or anything about that. What I see happening in my account is that the PO’s will be removed completely, at that time no PO’s exist in the App on Fiori, then at some random time it will add PO’s, seemly a random number of them, this will then trigger a push of all the new PO’s” .

              That’s exactly what i was talking about. Your explanation is perfect. Thanks a lot!

              (1) 
  4. darshan lad

    HI Mark Wright

    Great information!! thanx

    I’ve facing the issue while connection my on premise system to fetch data my development link is HTTP service ,can you suggest any thing on that or help me to connect  my back-end on premise system .

    can i get any information about how to establish connection between  on premises and cloud platform.

    Thanks

     

    Darshan Lad

     

    (0) 

Leave a Reply