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.

3 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) 

Leave a Reply