Skip to Content

Hi,

You probably have heard about SAP Enterprise App Modeler as Lisa and Sue have written some nice introductions here and here.
The key concept for SEAM is to use meta data, that describes the actual mobile application. But what does meta data means in this context?
The following should give you a basic understanding of who meta data for SEAM looks like, how it is structured and why it works. Let’s start.

SEAM meta data, that actually constitutes a SEAM application, is conceptually similar to HTML and a browser. While HTML describes the look of a web site, and JavaScript defines it behaviour the browser will read this metadata and builds an application out of it. The same is true for the meta data and the SEAM player.

Another similarity is that both, a web application and a seam application are basically build by files residing in a folder – the typical www folder you probably know from web development.

The SEAM metadata is a bit more structured. This is what a typical SEAM app looks like in the file system:

The start of the application is obviously the Application.app – this is similar to the main() method in many programming languages. The simplest version of it just points to the first view the app should display to the user:

 

{
   "MainPage":"/SEAMApp/Pages/Main.page",
   "_Name":"SEAMApp"
}

Obviously, it defines the MainPage to be read from a file that is under the directory “Pages”. The file “Main.page” describes how the first page will look like and this is the content of a very simple Main.page.

{
"Caption": "Main",
"Controls": [],
"_Name": "Main",
"_Type": "Page"
}

You see a simple Json, that is easy to understand, even without in-depth knowledge of the meta data model. We do have a caption defined with a value of “Main” and the control array is empty, so we should not expect any other control on the screen so far.

The properties starting with _ are internal, in the sense that they are used or are required by SEAM itself. While _Name is the unique ID of the control, _Type defines the – well – type of the control.

 

You may wonder what the outcome of this would be. Here it is:

Well, it does not look very spectacular, but remember
• You have defined an application without writing any line of code
• The app is a native app, no HTML rendering, using SAP Fiori for iOS design language
• The app has already handled authentication and onboarding for you

Now, let’s add some more features to the application and create an action. We place a file into the Actions folder, which is called “ShowMessage.action”. You already realized that the file extensions helps us to distinguish the purpose of a given file and organize our project structure. We define the JSON of the file as follows:

{
 "Animated": true,
 "IsIconHidden": false,
 "Message": "My First SEAM APP",
 "_Type": "Action.Type.ToastMessage"
}

As you can see, this looks very similar to the JSON we already we know already. There is a _Type property that defines what this object is all about and then there are object specific properties. Obviously, the message that should appear on the screen says “My First Seam APP”.

The next step would be to actually call the message. For this we go back to our Main.page and add a button to it:

{
 "Caption": "Main",
 "Controls": [
   {
    "Value": "Press Me",
    "_Name": "Button0",
    "_Type": "Control.Type.Button"
   }
 ],
 "_Name": "Main",
 "_Type": "Page"
}

We have simply added an object of type “Control.Type.Button” to the control array. Now, we just need to say that if we click the button, the previously defined message should be shown. Simply add an “OnPress” property and refer to our action:

{
 "Caption": "Main",
 "Controls": [
   {
    "OnPress": "/SEAMApp/Actions/ShowMessage.action",
    "Value": "Press Me",
    "_Name": "Button0",
    "_Type": "Control.Type.Button"
   }
 ],
 "_Name": "Main",
 "_Type": "Page"
}

Oh,look what we have done! It looks nice and clean.

And here is our action:

 

I hope that this brief introduction provided a basic understanding of how the meta data looks like and how it works. Of course, there is much more an obviously writing plain meta data in a text editor is not really something everybody wants to do. But there is hope!
Just use the SEAM Plugin for the SAP Web IDE.

 


Stay tuned for even more updates on SEAM in the next few weeks.

Have fun,
Martin

To report this post you need to login first.

15 Comments

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

  1. Martin Grasshoff Post author

    Hi,

    actually, the SEAM plugin is already available on SAP Web IDE for Multi-Cloud Version in the SAP Cloud Platform trial.

    You’ll still miss the client to fully use the Editor.

    -Martin

    (0) 
      1. Martin Grasshoff Post author

        Hi Stephen,

        the client is now available in the latest release of the SAP Cloud Platform SDK for iOS.

        There will be a blog about how to build the client shortly.

        Regards,

        Martin

         

        (0) 
  2. Jason Scott

    SEAM apps generated with the tns command (from latest edition of the sdk for iOS) cause a segmentation fault on launch in the apple simulator… even though it says that the build succeeded…

     

    (0) 
    1. Martin Grasshoff Post author

      Hi Scott,

      first, congratulations that you were able to build the client with the current documentation.

      Second, this happens if you are not having an application metadata in our initial build. What you need to do is to export you app from the WebIDE, then copy the files directly into the folder application.definitions, then start the install.sh script.

       

      Hope that help.

      Have fun,

      Martin

      (0) 
  3. Jason Scott

    Hi Martin

    Copying the files into the application.definitions folder is exactly what I did… No luck. Need some more documentation on the process I think.  😉

    Maybe it need to go into application.definitions inside a sub-folder?!

     

    (0) 
    1. Santaneel Pyne

      Hi Jason,

      It doesn’t need to go into a sub-folder. All contents of the zip can directly go into application.definitions.

      Thanks and regards,

      Santaneel

       

      (0) 
    1. Janarthanan Elangovan

      Hello Team,

      Any idea/options about consuming OData/Northwind service in our App modeler application.?

       

      @Bill.Froelich any suggestions/opinions on App Modeler update Bill.?

       

      Best Regards,

      Jana

      (0) 
      1. Martin Grasshoff Post author

        Hi Jana,

        consuming Northwind service is no problem at all. Did you encounter issues doing so?

        Anyhow, I’ recommend to use Mobile Services in-build Sample Service.

        -Martin

         

        (1) 
        1. Janarthanan Elangovan

          Hello Martin,

           

          Yes, We are trying to consume Northwind service and facing below two issues.

           

          Issue 1: after App deployment in SEAM client, when we press start button, we are not getting any prompt menu option to enter login details. (Application deployment through – mobile service).

          Issue 2: when we tried “Try demo” option, data are not getting populated into Application.( by copying App folder into application.definitions and deployed locally)

           

          kindly let me know your suggestion on above issues.

           

          Regards,

          Jana

          (0) 
          1. Martin Grasshoff Post author

            Hi Jana,

            difficult to support you from here. A common error is that the application.definitions folder is empty, when building the client with the install.sh script.

            Just copy an extracted export of your app definition from the WebIDE into this folder and rebuild the client.

            “Try demo” is currently without any functionality and just for demo purposes.

            Hope that gets you started.

            Regards,

            Martin

            (0) 
  4. FILIPPO AMBROSINI

    Hi Martin,

    thanks for this nice Blog, I have a question about the Layout Editor .

    Please, Could you tell me if Camera or Geolocalization feature of the iOS device can be handled/used by the SAP Enterprise App Modeler ?

    Thanks in advance

    Filippo

    (0) 

Leave a Reply