CODEWITHSUNDEEP
twitter-bootstrapxpageslotus-dominoxpages-extlib
Malin
Malin

Reputation: 697

Adding Bootstrap to a Domino form

In my XPages application I want to add some $$ Domino forms and style them with Bootstrap. Since bootstrap is already enabled for the application so its available on the server I was thinkin of re-using them on these forms so I added the following formula in the HTML Head Content section:

"<meta charset=\"utf-8\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <meta name=\"description\" content=\"\">
    <meta name=\"author\" content=\"\">
    <meta charset=\"utf-8\">
    <link rel=\"shortcut icon\" href=\"/" + @WebDbName + "/favicon.ico\">
    <title>Authentication Failure</title>
    <!-- Bootstrap core CSS -->
    <link href=\"../../xsp/.ibmxspres/.extlib/responsive/dijit/dbootstrap-0.1.1/theme/dbootstrap/dbootstrap.css\" rel=\"stylesheet\">
    <link href=\"../../xsp/.ibmxspres/.extlib/responsive/bootstrap3/css/bootstrap.css\" rel=\"stylesheet\">
    <script src=\"../../xsp/.ibmxspres/.extlib/responsive/jquery/jquery.min.js\"></script>  
    <script src=\"../../xsp/.ibmxspres/.extlib/responsive/bootstrap3/js/bootstrap.min.js\"></script>    
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src=\"http://getbootstrap.com/assets/js/html5shiv.js\"></script>
      <script src=\"http://getbootstrap.com/assets/js/respond.min.js\"></script>
    <![endif]-->"

As a result any text I apply seems to be formatted with the Bootstrap CSS. But components like jumbotron are not formatted although I notice the jumbotron class defined in the bootstrap.min.css file.

Am I overlooking something?

Upvotes: 0

Views: 1292

Answers (2)

Per Henrik Lausten
Per Henrik Lausten

Reputation: 21709

I have a Bootstrap enabled Domino form that uses the following in the HTML Head Content (which works):

"<meta http-equiv='X-UA-Compatible' content='IE=Edge'>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

<!-- Bootstrap core CSS -->
<link rel=\"stylesheet\" type=\"text/css\" href=\"/xsp/.ibmxspres/.extlib/bootstrap/xsptheme/xsp.css\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"/xsp/.ibmxspres/.extlib/bootstrap/bootstrap320/css/bootstrap.min.css\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"/xsp/.ibmxspres/.extlib/bootstrap/xpages300.css\">

<script src='/xsp/.ibmxspres/.extlib/bootstrap/jquery/jquery-1.11.0.min.js'></script>
<script src='/xsp/.ibmxspres/.extlib/bootstrap/bootstrap320/js/bootstrap.min.js'></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js\"></script>
  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js\"></script>
<![endif]-->"

So change your CSS link hrefs to start with /xsp (so, remove ../..) and see if it works.

Upvotes: 3

Paul Stephen Withers
Paul Stephen Withers

Reputation: 15739

The XPages runtime has code to recognise the path "/xsp/.ibmxspres" and run through all ResourceProviders defined to find where to load the relevant resource from. In this case, the subsequent ".extlib" identifies that it's part of the Extension Library plugin.

OSGi allows it to extract the relevant resource from the plugin.

With a standard Domino form, you don't have either of these, so it doesn't know where the files are and couldn't extract them if it did. If you download ExtLib from OpenNTF, you can unzip the relevant plugin ("com.ibm.xsp.theme.bootstrap") with whatever you normally use to extract zip files - a jar is another archive like a zip. You can then extract the bootstrap files and use accordingly. It's probably worth putting them on the server, in the \domino\html folder because there is a maximum number of design elements and NSF can hold.

Upvotes: 0

Related Questions