Skip to Content

Add Styling to an MDK App

test
0 %
Add Styling to an MDK App
Details

Add Styling to an MDK App

September 9, 2021
Created by
September 27, 2019
Customize an MDK app to display styling to its controls.

You will learn

  • How to change color of action bar and tool bar
  • How to change font color and background color of MDK control properties in a section page
QR code

Prerequisites

You may clone an existing project from GitHub repository and start directly with step 4 in this tutorial.


MDK
Step 1: Create a new MDK project in SAP Business Application Studio

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 Welcome page.

    MDK

    If you do not see Welcome page, you can access it via Help menu.

  3. Select MDK Project and click Start.

    MDK
  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 MDK_Styling
    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)
    MDK

    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.

    This screen will only show up when your CF login session has expired. Enter your login credentials, click Login icon and select the org & space where you have set up the initial configuration for your MDK app.

    MDK
  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
    MDK

    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 you will create an offline based app, hence Enable Offline option is selected.

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

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

Log on to answer question
Step 2: Add style metadata in LESS file

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.

    MDK
  2. Copy and paste the following code.

    @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 {
      font-color: @mdkYellow1;
      background-color: @mdkRed1;
    }
    
    //// below snippet is to style Object Header control in Customers_Detail.page
    
    /* Object Header - BodyText */
    /* iOS Only */
    .objectHeaderBodyText {
      font-color: red;
    }
    
    /* Object Header - Description */
    /* iOS Only */
    .objectHeaderDescription {
      font-color: blue;
    }
    
    /* Object Header - Footnote */
    /* iOS Only */
    .objectHeaderFootNote {
      font-color: green;
    }
    
    /* Object Header - Headline */
    /* iOS Only */
    .objectHeaderHeadline {
      font-color: #ff00ff;
    }
    
    /* Object Header - Background */
    .objectHeaderBackground {
    background-color: #DC143C;
    }
    
    /* Object Header - StatusText */
    /* iOS Only */
    .objectHeaderStatus {
      background-color: #cccccc;
      font-color: red;
      font-name: italicSystem;
      font-style: italic;
      font-size: 18;
    }
    
    /* Object Header - Subhead */
    /* iOS Only */
    .objectHeaderSubhead {
      font-color: yellow;
    }
    
    /* Object Header - SubstatusText */
    /* iOS Only */
    .objectHeaderSubStatus {
      background-color: #cccccc;
      font-color: blue;
      font-name: italicSystem;
      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.

    MDK
If you want to style 2 toolbar items with the same color, which syntax is correct?
×
Step 3: Set the styling for SDK controls

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 section button, click link icon next to Style property.

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

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

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

    MDKMDK
Which language extension for CSS is used by the Mobile Development Kit for styling applications?
×
Step 4: Deploy the application

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

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

    MDK
  2. Select deploy target as Mobile & Cloud.

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

    MDK

    You should see successful messages for both deployments.

    MDK
Log on to answer question
Step 5: Run the app

Make sure you are choosing the right device platform tab above. Once you have scanned and on-boarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

SAP Business Application Studio has a feature to generate QR code for app onboarding.

  1. Click the Application.app to open it in MDK Application Editor and click Application QR Code icon.

    MDK
  2. Select com.sap.mdk.demo application from the list.

    MDK

    The On-boarding QR code is now displayed.

    MDK
  3. Follow these steps to on-board the MDK client.

    Once you accept app update, you will see the Main page (with LOGOUT and SYNC options at bottom of the page), CUSTOMERS and PRODUCTS entity sets to navigate to List-Detail page. In Main page, you will notice styling on action bar, tool bar, items (Logout & Sync) available on tool bar, CUSTOMERS button.

    MDK
  4. Tap CUSTOMERS to navigate to Customer List. You will see that Title property has been styled.

    MDK
  5. Tap any record to navigate to Customer Detail page. You will see that Object Header control has been styled.

    MDK

Make sure you are choosing the right device platform tab above. Once you have scanned and on-boarded using the onboarding URL, it will be remembered. When you Log out and onboard again, you will be asked either to continue to use current application or to scan new QR code.

SAP Business Application Studio has a feature to generate QR code for app onboarding.

  1. Click the Application.app to open it in MDK Application Editor and click Application QR Code icon.

    MDK
  2. Select com.sap.mdk.demo application from the list.

    MDK

    The On-boarding QR code is now displayed.

    MDK
  3. Follow these steps to on-board the MDK client.

    Once you accept app update, you will see the Main page (with Logout and Sync options at bottom of the page), Customers and Products entity sets to navigate to List-Detail page. In Main page, you will notice styling on action bar, tool bar, items (Logout & Sync) available on tool bar, Customers button.

    MDK
  4. Tap Customers to navigate to Customer List. You will see that Title property has been styled.

    MDK
  5. Tap any record to navigate to Customer Detail page. You will see that Object Header control has been styled.

    MDK
  1. Click the highlighted button to open the MDK Web application in a browser. Enter your SAP BTP credentials if asked.

    MDK

    You can also open the MDK web application by accessing its URL from .project.json file.
    MDK

    You will see the Main page (with Logout option at bottom of the page), Customers and Products entity sets to navigate to List-Detail page. In Main page, you will notice styling on action bar, tool bar, items (Logout) available on tool bar, Customers button.

    MDK
  2. Click Customers to navigate to Customer List. You will see that Title property has been styled.

    MDK
  3. Click any record to navigate to Customer Detail page. You will see that Object Header control has been styled.

    MDK
What is the class name being used to style the Customer button?
×

Congratulations, you have successfully styled your MDK app and you can continue with the remaining tutorials in this mission.


Next Steps

Back to top