Or how do I build an application on my ODT40?


Don’t miss out our Guide: SAP Web IDE plugin for SAP Event Management!

Hi,

My name is Robert I’m part of the SAP Event Management Team and today I want to share how I build a Fiori Application on the ODT40 Scenario in less than 10 Minutes

Disclaimer: This step by step guide is neither a complete runthrough nor does it fullfill all nescessary steps to build your own SAP Freight Order Visibility Application, but it will provide enough input to give a good kickstart.

Presets:

  • Working Web IDE
  • Enabled SAP Transactional Template Plugin
  • ODT40 Scenario in the backend
  • Connectivity to the backend

Step one – Choose your Template

Starting a new Project from Template will show us this screen:

TemplateSelection.jpg

We’re choosing the Transactional App for SAP Event Management and while we’re at it we’ll favorite the template by pressing the heart shaped button in the left upper corner.

Step Two – Choose your Project Name

We choose a Project Name, that has nothing to do with how the application will be called in your Fiori Launchpad, neither will it choose the title of your application, it is for your local workspace of the SAP Web IDE:

ProjectName.jpg

Step Three – Find your Destination and Service

Choose the destination to your backend and the Event Management Service:

Destination.jpg

Step Four – Let’s get to business

As we want to build an Application based on ODT40 we take the “FreighOrder” OdataID.

OdataID.jpg

Step Five – The Master List

The master list will be the things we want to keep track of. So the main purpose of our application, something catchy, for example if I would track penguins I would have some overview attributes of the penguins in this list, like color, or chipid, or pecksize…

But we want to track “Freight Orders”; So:

Title.jpg

Static Filters help us predefine Filters that are always in place, for example keeping my users on the same carrier, or timeframe…

StaticFilters.jpg

Or allow them only to view active Freight Orders. Placeholder and tooltip for the search bar will be adjusted here:

Search.jpg

Now to the title of your tracked items: We choose to display SourceLocationCityName to DestinationLocationCityName. In order to concatinate those two we choose the conjunction word ‘to’, but we can imagine many more compositions, for example: First Property: “Carrier”, Second Property: “CurrentDelayInHours” Conjunction: “Is always late by:”

MasterListItem.jpg

Attributes and Status of the Item will give us more opportunities to show relevant Information, without actually pressing on the item:

MasterListAttributes.jpg

Step Six – Filter Filter Filter

When there is data there is always the possibility of filtering this data to the needs I have. So we provide an easy way to choose what and how your users will be able to filter your data:

Filters.jpg

So for this example, the user will be able to pick only one type of Carrier but multiple Transportation Status.

Step Seven – Lets go more into detail

The “Detail Step” is just as straight forward as the “Master Step”. We choose a title and the properties we would like to display:

DetailsProperties.jpg

The Event Messages to the tracked items will be displayed in the table underneath. The table is restricted to only five user defined columns in order to prevent strange looking tables.

EventMessageTable.jpg

If we want to add a tab, we press the button and have to provide more information on what we want to display there. Per default only table tabs are created, so the same rule about columns apply:

Tab.jpg

Step Eight – Reporting for duty

As we want a functional application we want the users to report the expected events, by checking the checkbox “Report unexpected” and we want to customize a unexpected event,to be reported as well:

Unexpected.jpg

We can not just choose what they will report, no, we can also choose the order which they have to do this!

Step Nine – More Details of the Details

The last step is all about the details of the Event Messages itself. You will be able to provide every property you would like to be displayed as details for the Event Messages.

EventMessageDetails.jpg

Step Ten – Finnish

After the last step we run the newly created application with the localIndex.html and look at what we did.

Fo1.jpg

There you go. A working Fiori Application for our SAP Event Managment in a short period of time!

To report this post you need to login first.

11 Comments

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

  1. Zenon Kowalewski

    Hello Robert.

    Please see attached error.    Do you have any idea what causes this?   Freight Orders header info is displayed but Details screen is empty.

    error 500.JPG

    Trans. /IWFNDERROR_LOG

    IWFND_ERROR_LOG.JPG

    Thanks.

    Zenon.

    (0) 
    1. Robert Kinda Post author

      Hi Zenon,

      yes unfortunatly I had the pleasure to entcounter that issue. It’s a Gateway Issue introduces in SP12. A note that should fix this issue should be: 2181284. Please Apply the note and try again!

      Regards,

      Robert

      (0) 
      1. Zenon Kowalewski

        Hi Robert.

        I’d like to add a photo attachment to an Event Message in my app.   Do you have any thoughts on how I could achieve this via Odata?   This can easily be achieved with the SAP EM WEB UI.

        Thanks for any suggestions.

        Zenon.

        (0) 
        1. Steffen Georg Butschbacher

          Hi Zenon,

          this is currently not supported. What you could do is to save the attachment in a file system and attach the URL as a parameter in your event message.

          An option to try would be to do an Enhancement to the OData methods. This could work for event messages as the implementation here is straight forward. But we have never tried it.

          Best regards,

          Steffen

          (0) 
          1. Zenon Kowalewski

            Hi Steffen.

            The attachment is now working.  Several options were available.  Looks like I’ll upload the photo attachment from a file server in an Event Message Pre-processing FM.

            There are some problems with the Webide template ‘Transactional App for SAP EM’ but we can fix those in the javascript after the app is generated.

            If possible could someone fix these problems in the template:

            1. Expected Events do not have Reasons in the generated app. Strange that  Unexpected Events do have Reasons in the app!
            2. When passing Event Message Parameters,  the app only sends 1 character. e.g. If we add an Event Message parameter ‘ABCDE123’,  it appears in EM as ‘A’.

            Regards.

            Zenon.

            (0) 
            1. Steffen Georg Butschbacher

              Hi Zenon,

              2.) will be fixed in one of the next releases of the WebIDE

              To 1)

              Normally Reason Codes are only used for Unexpected Events like Delay -> Weather, Traffic Jam, Breakdown etc.

              For which scenario do you use Reason Codes on Expected Events?

              Best regards,

              Steffen

              (0) 
              1. Zenon Kowalewski

                Hi Steffen.

                A requirement came up for reporting a POD with a reason.  One of the Reasons for POD was ‘parcel left with neighbour’ when the consignee was not able to answer the door.   Seemed a nice way to capture some additional details when using the Freight Order app..

                Thanks.

                Zenon.

                (0) 

Leave a Reply