Skip to Content

In this post i want to show how to use Bootstrap 3.1.1 in OpenUI5 / SAPUI5 applications and websites – while still using control-based views.

Therefore i use a custom OpenUI5 library called UI5Strap.

Get Started with UI5Strap

1. Get the latest OpenUI5 version


Download the latest OpenUI5 runtime library from http://sap.github.io/openui5/



2. Download UI5Strap

Download the latest Ui5Strap library from http://ui5strap.com/download.html

3. Create application structure


Create your desired application structure. Put both the OpenUI5 library and the UI5Strap library somewhere into your project directory.

Please note: UI5Strap already contains an example application that you can use as starting point for your responsive website or app:

Screen Shot 2014-03-29 at 2.57.34 AM.png

4. Specify the location of UI5Strap in your application

We must tell openUI5 where to find the UI5Strap components:


jQuery.sap.registerModulePath("ui5strap", "./lib/ui5strap");

Please change the path to the UI5Strap library according to your setup.

5. Include the Bootstrap stylesheets

Either you include the stylesheets of Bootstrap directly into your index.html file, or you dynamically load it from somewhere within your application:


jQuery.sap.includeStyleSheet(jQuery.sap.getModulePath("ui5strap") + "/bootstrap-3.1.1-dist/css/bootstrap.min.css", 'bootstrap-css', function success(){}, function error(){});

6. Use the UI5Strap controls in your application

You can use the UI5Strap controls in the same way as other OpenUI5 controls.

For example you can create a jumbotron with a nested heading (<h1>) and paragraph (<p>) controls:


<!-- Jumbotron -->
<div data-sap-ui-type="ui5strap.Jumbotron">
    <div data-sap-ui-type="ui5strap.Heading" data-level="1" data-text="{i18n>HOME_HEADING}"></div>
    <div data-sap-ui-type="ui5strap.Paragraph" data-text="{i18n>HOME_LEAD}"></div>
    <div data-sap-ui-type="ui5strap.Paragraph">
        <div data-sap-ui-type="ui5strap.Button" data-tap="gotoGetStarted" data-size="Large" data-text="{i18n>HOME_BTN_GET_STARTED}" data-severity="Primary"></div>
    </div>
</div>

To use the bootstrap grid functionality for layout you can create a row with columns:



<div data-sap-ui-type="ui5strap.Row">
   <div data-sap-ui-type="ui5strap.Col" data-columns-small="4">
       <div data-sap-ui-type="ui5strap.Heading" data-level="2" data-text="{i18n>HOME_FEAT1_HEADING}"></div>
       <div data-sap-ui-type="ui5strap.Paragraph" data-text="{i18n>HOME_FEAT1_TEXT}"></div>
       <div data-sap-ui-type="ui5strap.Paragraph">
           <div data-sap-ui-type="ui5strap.Button" data-tap="gotoAbout" data-text="{i18n>HOME_FEAT1_BUTTON}"></div>
       </div>
  </div>
  <div data-sap-ui-type="ui5strap.Col" data-columns-small="4">
      <div data-sap-ui-type="ui5strap.Heading" data-level="2" data-text="{i18n>HOME_FEAT2_HEADING}"></div>
      <div data-sap-ui-type="ui5strap.Paragraph" data-text="{i18n>HOME_FEAT2_TEXT}"></div>
      <div data-sap-ui-type="ui5strap.Paragraph">
          <div data-sap-ui-type="ui5strap.Button" data-tap="gotoAbout" data-text="{i18n>HOME_FEAT2_BUTTON}"></div>
      </div>
   </div>
   <div data-sap-ui-type="ui5strap.Col" data-columns-small="4">
       <div data-sap-ui-type="ui5strap.Heading" data-level="2" data-text="{i18n>HOME_FEAT3_HEADING}"></div>
           <div data-sap-ui-type="ui5strap.Paragraph" data-text="{i18n>HOME_FEAT3_TEXT}"></div>
          <div data-sap-ui-type="ui5strap.Paragraph">
              <div data-sap-ui-type="ui5strap.Button" data-tap="gotoAbout" data-text="{i18n>HOME_FEAT3_BUTTON}"></div>
          </div>
       </div>
  </div>

The above snippet creates a 3 column grid with embedded headings, paragraphs and buttons in each column.

Please also visit the Ui5Strap homepage for a more detailed documentation.

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

    1. Jan Philipp Knoeller Post author

      Hello Krishna,

      i think there should be no problems with using UI5Strap in SAPUI5 as well.

      But since UI5Strap is an open source project, i primarily support and target OpenUI5.

      Kind regards,

      Jan

      (0) 
  1. Sharique Nasser

    Hi Jan,

    It sounds great.

    Finally we can use Bootstrap CSS in UI5.

    Had couple of questions,

         How stable is this?

         Can we use it for Production use?

    Regards,

    Sharique

    (0) 

Leave a Reply