Add Styling to an MDK App

This step includes creating the mobile development kit project in the editor.

1. Launch the Dev space in SAP Business Application Studio.

2. Click Start from template on Get Started page.

   

   If you do not see the Get Started page, you can access it by typing >get started in the center search bar.

   

3. Select MDK Project and click Start.

   

   If you do not see the MDK Project option check if your Dev Space has finished loading or reload the page in your browser and try again.

   This screen will only show up when your CF login session has expired. Enter your login credentials, click Sign in. 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.

   

4. In Type step, select or provide the below information and click Next:

   Field	Value
   MDK Template Type	Select CRUD from the dropdown
   Your Project Name	Provide a name of your choice. MDK_Styling is used for this tutorial
   Your Application Name	<default name is same as project name, you can provide any name of your choice>
   Target MDK Client Version	Leave the default selection as MDK 6.0+ (For use with MDK 6.0 or later clients)
   Choose a target folder	By default, the target folder uses project root path. However, you can choose a different folder path

   

   The CRUD template creates the offline or online actions, rules, messages, List Detail Pages with editable options. More details on MDK template is available in help documentation.

5. In Service configuration step, provide or select the below information and click Next:

   Field	Value
   Data Source	Select Mobile Services from the dropdown
   Mobile Services Landscape	Select standard from the dropdown
   Application Id	Select com.sap.mdk.demo from the dropdown
   Destination	Select SampleServiceV2 from the dropdown
   Enter a path to the OData service	Leave it as it is
   Enable Offline	It’s enabled by default

   

   Regardless of whether you are creating an online or offline application, this step is needed app to connect to an OData service. When building an Mobile Development Kit application, it assumes the OData service created and the destination that points to this service is set up in Mobile Services. Since we have Enable Offline set to Yes, the generated application will be offline enabled in the MDK Mobile client.

6. In Data Collections step, select Customers and Products. Click Finish to complete the project creation.

   

7. After clicking Finish, the wizard will generate your MDK Application based on your selections. You should now see the MDK_Styling project in the project explorer.

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. Copy and paste the following code.

   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;
   }
   

   To learn more on styling, find more details in help documentation.

3. Save your changes to the Styles.less file.

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

   

   You should see successful messages for both deployments.