Add Styling to an MDK App

This step includes creating a mobile project in SAP Build Lobby.

1. In the SAP Build Lobby, click Create > Create to start the creation process.

   

2. Click the Build an Application tile.

   

3. Click the SAP Build Code tile to develop your project in SAP Business Application Studio, the SAP Build Code development environment, leveraging the capabilities of the services included in SAP Build Code.

   

4. Click the Mobile Application tile.

   

5. Enter the project name MDK_Stylingcp-mobile-dev-kit-style (used for this tutorial) , add a description (optional), and click Create.

   

   SAP Build Code recommends the dev space it deems most suitable, and it will automatically create a new one for you if you don’t already have one. If you have other dev spaces of the Mobile Application type, you can select between them. If you want to create a different dev space, go to the Dev Space Manager. See Working in the Dev Space Manager.

6. Your project is being created in the Project table of the lobby. The creation of the project may take a few moments. After the project has been created successfully, click the project to open it.

   

7. The project opens in SAP Business Application Studio, the SAP Build Code development environment.

   

   When you open the SAP Business Application Studio for the first time, a consent window may appear asking for permission to track your usage. Please review and provide your consent accordingly before proceeding.
   

   

The Storyboard provides a graphical view of the application’s runtime resources, external resources, UI of the application, and the connections between them. This allows for a quick understanding of the application’s structure and components.

• Runtime Resources: In the Runtime Resources section, you can see the mobile services application and mobile destination used in the project, with a dotted-line connected to the External Resources.
• External Resources: In the External Resources section, you can see the external services used in the project, with a dotted-line connection to the Runtime Resource or the UI app.
• UI Application: In the UI Applications section, you can see the mobile applications.

1. Click on + button in the Runtime Resources column to add a mobile services app to your project.

   

   This screen will only show up when your CF login session has expired. Use either Credentials OR SSO Passcode option for authentication. After successful signed in to Cloud Foundry, select your Cloud Foundry Organization and Space where you have set up the initial configuration for your MDK app and click Apply.

   

2. Choose myapp.mdk.demo from the applications list in the Mobile Application Services editor.

   

3. Select SampleServiceV4 from the destinations list and click Add App to Project.

   

   You can access the mobile services admin UI by clicking on the Mobile Services option on the right hand side.

   In the storyboard window, the app and mobile destination will be added under the Runtime Resources column. The mobile destination will also be added under the External Resources with a dotted-line connection to the Runtime Resource. The External Resource will be used to create the UI application.

   

4. Click the + button in the UI application column header to add mobile UI for your project.

   

5. In the Basic Information step, select the MDK Template Type as CRUD, leave the other options as they are, and click Next.

   

   More details on MDK template is available in help documentation.

6. In the Data Collections step, provide the below information and click Finish:

   Field	Value
   Enter a path to service (e.g. /sap/opu/odata/sap/SERVICE_NAME)	Leave it as it is
   Enable Offline	It’s enabled by default
   Select all data collections	Leave it as it is
   What types of data will your application contain?	Select Customers and Products

   

   Regardless of whether you are creating an online or offline application, this step is needed for app to connect to an OData service. When building an MDK Mobile application, it assumes the OData service created and the destination that points to this service is set up in Mobile Services. For MDK Web application, destination is set up in SAP BTP cockpit.

   Since you have Enable Offline set to Yes, the generated application will be offline enabled in the MDK Mobile client and will run as online in Web environment.

   Data Collections step retrieves the entity sets information for the selected destination.

7. After clicking Finish, the storyboard is updated displaying the UI component. The MDK project is generated in the project explorer based on your selections.

   

The LESS stylesheet provides the ability to define styling styles that can be used to style the UI in the MDK app.

You can find more details about styling in MDK.

1. In MDK_Styling project, expand the Styles folder and open the Styles.less file.

   

2. Replace the generated code with below:

   LESS

   Copy

   @mdkYellow1: #ffbb33;
   @mdkRed1: #ff0000;
   
   
   //// This style applies to all the ActionBars in the application
   ActionBar {
       color: white;
       background-color: red;
   }
   
   //// This style applies to all the ToolBars in the application
   ToolBar {
       color: white;
       background-color: gray; /* Android */
       bartintcolor: gray;     /* iOS */
   }
   
   //// LogoutToolbarItem is tool bar item for Logout in Main.page
   #LogoutToolbarItem  {
       color: brown;
   }
   
   //// UploadToolbarItem is tool bar item for Sync in Main.page
   #UploadToolbarItem  {
       color: blue;
   }
   
   //// By-Class style: These style classes can be referenced from rules and set using ClientAPI setStyle function
   //// below snippet is to style Customers button on Main.page
   .MyCustomerButton{
     font-color: @mdkRed1;
     background-color: cyan;
   }
   
   //// below snippet is to style Title property of an Object Table control in Customers_List.page
   .ObjectTableTitle {
    color: @mdkYellow1;
   }
   
   
   //// below snippet is to style Object Header control in Customers_Detail.page
   
   /* Object Header - BodyText */
   .objectHeaderBodyText {
     color: red;
   }
   
   /* Object Header - Description */
   .objectHeaderDescription {
     color: blue;
   }
   
   /* Object Header - Footnote */
   .objectHeaderFootNote {
     color: green;
   }
   
   /* Object Header - Headline */
   .objectHeaderHeadline {
     color: #ff00ff;
   }
   
   /* Object Header - Background */
   .objectHeaderBackground {
   background-color: #DC143C;
   }
   
   /* Object Header - StatusText */
   .objectHeaderStatus {
     color: red;
     font-style: italic;
     font-size: 18;
   }
   
   /* Object Header - Subhead */
   .objectHeaderSubhead {
     color: yellow;
   }
   
   /* Object Header - SubstatusText */
   .objectHeaderSubStatus {
     color: blue;
     font-style: italic;
     font-size: 18;
   }
   

   Styles.less is already bound to Styles properties in Application.app file.

   

In this step, you will bind style classes:

• MyCustomerButton to Customers section button control on Main.page
• ObjectTableTitle to Title property of Object Table in Customers_List.page
• objectHeaderBodyText to BodyText property of Object Header in Customers_Detail.page
• objectHeaderDescription to Description property of Object Header in Customers_Detail.page
• objectHeaderFootNote to Footnote property of Object Header in Customers_Detail.page
• objectHeaderHeadline to HeadlineText property of Object Header in Customers_Detail.page
• objectHeaderBackground to ObjectHeader property of Object Header in Customers_Detail.page
• objectHeaderStatus to StatusText property of Object Header in Customers_Detail.page
• objectHeaderSubhead to Subhead property of Object Header in Customers_Detail.page
• objectHeaderSubStatus to SubstatusText property of Object Header in Customers_Detail.page

1. In the Main.page, select Customers button, click link icon next to Button property under Style.

   In Object browser, double click MyCustomerButton class to bind style property and click OK.

   

2. Navigate to Pages | SampleServiceV4_Customers, click Customers_List.page, select Object Table control, scroll-down to Style section.

   Click link icon next to Title property.

   In Object browser, double-click ObjectTableTitle class to bind style property and click OK.

   

3. Navigate to Pages | SampleServiceV4_Customers, click Customers_Detail.page, select Object Header control, scroll-down to Style section and bind control properties to style properties.

   

So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, you will deploy the application definitions to Mobile Services and Cloud Foundry to use it in the Mobile client and Web application respectively.

1. Right-click Application.app and select MDK: Deploy.

   

2. Select deploy target as Mobile & Cloud.

   MDK editor will deploy the metadata to Mobile Services (for Mobile client) followed by to Cloud Foundry (for Web application).

   

   Ensure that you see successful messages for both deployments.

   

SAP Business Application Studio has a feature to display the QR code for onboarding in the Mobile client. Click on Application.app to open it in MDK Application Editor, and then click the Application QR Code icon.

The On-boarding QR code is now displayed.

Leave the Onboarding dialog box open for the next step.