In my last blog, I wrote about how to create an OData service by using the Mobile Backend Generator. You could then use that newly generated OData service by building a mobile app with SAP Cloud Platform SDK for iOS, SAP Cloud Platform SDK for Android, MDK or SAP Mobile Cards!
With this blog, I would like to show you the Graphical Modeling Tool and how easy it is to visualize your entity sets and relationships. I am a visual learner so this tool was something that I enjoyed using. I bet there are many people like me, so that is why I thought I would create this blog to show you how easy it is to use
If you’re new to developing mobile apps and want to learn more about developing apps without having to do much coding, you might want to begin by going through this Learning Journey and these helpful videos.
The Graphical Modeling Tool is a new tool that's available from within the Mobile Backend Generator. It lets you edit or create a CSDL (Common Schema Definition Language) file. The extension of the file is XML (Extensible Markup Language).
The first thing I did was to ensure that my environment was set up correctly. The SAP Web IDE Full-Stack service must be enabled in the SAP Cloud Platform Cockpit. Once you're in the SAP Cloud Platform Cockpit, select “Services” (1) and type web into the category search field (2). Enable the service (3). Select the box (4).
Under Take Action, select “Go to Service” (1). This brings you to SAP Web IDE Full-Stack.
Select the gear icon in the left menu (1) and select “Features” (2). Make sure “Mobile Services App Development Tools V Master” is “ON” (3).
Now that the environment is set up, let's start with ...
Why would you need to edit a CSDL file? When there are changes to be made to the database, like a new table or a new field, you will need to update your CSDL file to reflect this new change.
Select the “</>” symbol (1) to enter your workspace in an existing project where you created your own OData service. Right-click the CSDL file (2) and select “Open Code Editor” (3).
The code editor displays the CSDL file, which made up of the metadata that defines the objects in the database.
Although this is helpful, wouldn’t it be much easier if you could see the relationships graphically? Look no further! Well, look below 🙂
In your existing project, right-click the CSDL file (1) and select “Open CSDL Editor” (2).
The graphical editor opens and shows the CSDL file in a graphical format. You can easily see that the names of the entity types and their properties and their relationships to each other. I really like seeing the entity types displayed in this way. Note: if your CSDL has lots of entity types, the images might be very small. Just zoom in to look at your entity types. I found the right column very easy to use and to understand.
There are three entity types in this simple CSDL file. The file contains no complex types, enum types, or data methods. If enum types were defined in your CSDL file, you'd see them as a menu item between “Complex Types” and “Data Methods”.
If you select the whitespace (1) in the graphical editor, you see the attributes of the CSDL schema. You see the OData Version, Namespace, Alias, and you can check whether you wish to “Track Changes” (2).
If you select the "Accounts" entity type, if you select an Entity Type (1), its attributes show in the right column. The properties (2) for that entity are also shown. It's easy to figure out how to delete or add a property. Let's try doing both!
You can delete properties from your entity by selecting the property (1), then selecting the trash icon (2).
Add a property to your entity by selecting the + sign (1) and filling out the name (2), type (3), maximum length (4) and selecting “Create” (5). The UI (user interface) changes dynamically when the type changes.
What if I want to edit a property? How is that done? Select a single entity property to see the attributes in the right column (1).
I have saved the best for last! Let me show you how you can create a function or action. You can define a function, which has a return type, or an action; which may or may not have a return type. Select the “+” sign (1) and fill in the name of the method (2), whether it is an action or function (3) and select “Create” (4).
Add parameters to your function or action by selecting the “+” sign (1), entering a name (2), and selecting the type (3). Select “Create” (4).
Gotcha #1: There will be Annotations within the CSDL file that are not shown visually; don’t remove them from the file.
Let’s define a new navigation property between Contacts and Opportunities to show a relationship. Look here for more information about navigation properties.
Select the entity type you're navigating from (1), then select the “+” sign next to Properties (2). Check Navigation (3) and provide the name and type of the entity to which you want to navigate (4,5). The partner will default as the first entity type (6). Select “Create.” (7)
Ideally, the navigation properties should be bidirectional.
You would want to create a new CSDL for a new project first then move onto the CSDL creation. Create a new project that will use your CSDL file. Select the “</>” symbol (1) to enter your workspace. Right-click the workspace folder, select “New” (2), then “Project from Template” (3).
Change the Category to “Mobile Services” (1) and select “Mobile OData Service Project” (2). Select “Next” (3).
Provide a project name (1), then select “Next” (2).
Provide a service app name (1) and the version (2). For simplicity, I'm using an in-memory database (3), a deployment target of Cloud Foundry (4) and “None” (5) as the authentication mode. Select “Finish” (6) when done. See Generating an OData Service for alternatives to using an in-memory database.
Great! Now that the project is created, I am going to create a CSDL file. Right-click your project folder (1), select “New” (2), then “OData CSDL Document” (3).
Choose the OData Version (1), provide a schema namespace (2), a namespace alias, and select “Create” (4).
Double-click (1) the CSDL file to open the graphic editor (2). There is nothing to display so you see a blank screen.
Add an entity type (1) called “Accounts” (2) and select “Create” (3). Accounts have the following properties: address1, address2, city, country, email, and name. Create another entity type called “Contacts” with the following properties: account, dept, email, and name. For brevity, I am only showing how to create the one entity type.
Select the “+” sign (1), provide the name (2), type (3), maximum length (4) and select “Create” (5).
When you finish adding properties to your entity type, don’t forget to save (1)!!
You aren't done yet! The two entity types are displayed, but we need to show how they relate to each other. I did this by adding navigation properties.
Let’s add a bidirectional relationship between “Accounts” and “Contacts”. Select the “+” sign (1) in the Properties section,then check Navigation. (2) Enter the name of the entity (3), in this case, “Contacts”, then select its type, “(Entity Type) Contacts” (4). The partner field defaults to entity type to which you are adding a property. Select “Create” (5).
You can now see the relationship between the two entity types.
Now I wanted to make sure that the CSDL file looks correct in code so I right-clicked the CSDL file (1) and select “Open Code Editor” (2).
The code editor now shows the CSDL that I generated in the graphical editor!
With your new or updated CSDL, you can now generate an OData service using the Mobile Backend Generator with your updated metadata definitions.
Gotcha #2: If you are making changes to an existing CSDL file, you need to change the major/minor version in your serviceProperties.json file. I forgot to do this and my new changes were not picked up when I tried to run my application.
I hope you've enjoyed this blog!
With this blog, I would like to show you the Graphical Modeling Tool and how easy it is to visualize your entity sets and relationships. I am a visual learner so this tool was something that I enjoyed using. I bet there are many people like me, so that is why I thought I would create this blog to show you how easy it is to use
If you’re new to developing mobile apps and want to learn more about developing apps without having to do much coding, you might want to begin by going through this Learning Journey and these helpful videos.
About the Graphical Modeling Tool
The Graphical Modeling Tool is a new tool that's available from within the Mobile Backend Generator. It lets you edit or create a CSDL (Common Schema Definition Language) file. The extension of the file is XML (Extensible Markup Language).
Setting Up your Environment
The first thing I did was to ensure that my environment was set up correctly. The SAP Web IDE Full-Stack service must be enabled in the SAP Cloud Platform Cockpit. Once you're in the SAP Cloud Platform Cockpit, select “Services” (1) and type web into the category search field (2). Enable the service (3). Select the box (4).
Under Take Action, select “Go to Service” (1). This brings you to SAP Web IDE Full-Stack.
Select the gear icon in the left menu (1) and select “Features” (2). Make sure “Mobile Services App Development Tools V Master” is “ON” (3).
Now that the environment is set up, let's start with ...
Editing an Existing CSDL File
Why would you need to edit a CSDL file? When there are changes to be made to the database, like a new table or a new field, you will need to update your CSDL file to reflect this new change.
Select the “</>” symbol (1) to enter your workspace in an existing project where you created your own OData service. Right-click the CSDL file (2) and select “Open Code Editor” (3).
The code editor displays the CSDL file, which made up of the metadata that defines the objects in the database.
Although this is helpful, wouldn’t it be much easier if you could see the relationships graphically? Look no further! Well, look below 🙂
In your existing project, right-click the CSDL file (1) and select “Open CSDL Editor” (2).
The graphical editor opens and shows the CSDL file in a graphical format. You can easily see that the names of the entity types and their properties and their relationships to each other. I really like seeing the entity types displayed in this way. Note: if your CSDL has lots of entity types, the images might be very small. Just zoom in to look at your entity types. I found the right column very easy to use and to understand.
There are three entity types in this simple CSDL file. The file contains no complex types, enum types, or data methods. If enum types were defined in your CSDL file, you'd see them as a menu item between “Complex Types” and “Data Methods”.
If you select the whitespace (1) in the graphical editor, you see the attributes of the CSDL schema. You see the OData Version, Namespace, Alias, and you can check whether you wish to “Track Changes” (2).
If you select the "Accounts" entity type, if you select an Entity Type (1), its attributes show in the right column. The properties (2) for that entity are also shown. It's easy to figure out how to delete or add a property. Let's try doing both!
You can delete properties from your entity by selecting the property (1), then selecting the trash icon (2).
Add a property to your entity by selecting the + sign (1) and filling out the name (2), type (3), maximum length (4) and selecting “Create” (5). The UI (user interface) changes dynamically when the type changes.
What if I want to edit a property? How is that done? Select a single entity property to see the attributes in the right column (1).
I have saved the best for last! Let me show you how you can create a function or action. You can define a function, which has a return type, or an action; which may or may not have a return type. Select the “+” sign (1) and fill in the name of the method (2), whether it is an action or function (3) and select “Create” (4).
Add parameters to your function or action by selecting the “+” sign (1), entering a name (2), and selecting the type (3). Select “Create” (4).
Gotcha #1: There will be Annotations within the CSDL file that are not shown visually; don’t remove them from the file.
Let’s define a new navigation property between Contacts and Opportunities to show a relationship. Look here for more information about navigation properties.
Select the entity type you're navigating from (1), then select the “+” sign next to Properties (2). Check Navigation (3) and provide the name and type of the entity to which you want to navigate (4,5). The partner will default as the first entity type (6). Select “Create.” (7)
Ideally, the navigation properties should be bidirectional.
Creating a New CSDL File
You would want to create a new CSDL for a new project first then move onto the CSDL creation. Create a new project that will use your CSDL file. Select the “</>” symbol (1) to enter your workspace. Right-click the workspace folder, select “New” (2), then “Project from Template” (3).
Change the Category to “Mobile Services” (1) and select “Mobile OData Service Project” (2). Select “Next” (3).
Provide a project name (1), then select “Next” (2).
Provide a service app name (1) and the version (2). For simplicity, I'm using an in-memory database (3), a deployment target of Cloud Foundry (4) and “None” (5) as the authentication mode. Select “Finish” (6) when done. See Generating an OData Service for alternatives to using an in-memory database.
Great! Now that the project is created, I am going to create a CSDL file. Right-click your project folder (1), select “New” (2), then “OData CSDL Document” (3).
Choose the OData Version (1), provide a schema namespace (2), a namespace alias, and select “Create” (4).
Double-click (1) the CSDL file to open the graphic editor (2). There is nothing to display so you see a blank screen.
Add an entity type (1) called “Accounts” (2) and select “Create” (3). Accounts have the following properties: address1, address2, city, country, email, and name. Create another entity type called “Contacts” with the following properties: account, dept, email, and name. For brevity, I am only showing how to create the one entity type.
Select the “+” sign (1), provide the name (2), type (3), maximum length (4) and select “Create” (5).
When you finish adding properties to your entity type, don’t forget to save (1)!!
You aren't done yet! The two entity types are displayed, but we need to show how they relate to each other. I did this by adding navigation properties.
Let’s add a bidirectional relationship between “Accounts” and “Contacts”. Select the “+” sign (1) in the Properties section,then check Navigation. (2) Enter the name of the entity (3), in this case, “Contacts”, then select its type, “(Entity Type) Contacts” (4). The partner field defaults to entity type to which you are adding a property. Select “Create” (5).
You can now see the relationship between the two entity types.
Now I wanted to make sure that the CSDL file looks correct in code so I right-clicked the CSDL file (1) and select “Open Code Editor” (2).
The code editor now shows the CSDL that I generated in the graphical editor!
With your new or updated CSDL, you can now generate an OData service using the Mobile Backend Generator with your updated metadata definitions.
Gotcha #2: If you are making changes to an existing CSDL file, you need to change the major/minor version in your serviceProperties.json file. I forgot to do this and my new changes were not picked up when I tried to run my application.
I hope you've enjoyed this blog!
- SAP Managed Tags:
1 Comment
