javascript - How can I use XSL in tandem with Bootstrap? -
so working on web page takes data xml file , uses parts of data c# file create links displayed on page. page displays these in table via xslt. super new web development , started learning xml, html, bootstrap, , xslt week ago. goal reformat whole page still using same xml create links. made mock how want site don't know how use xsl within bootstrap create links once more.
bootstrap mock up:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <!-- html5 doctype --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- setting width runs on mobile or desktop --> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- ie compatibility --> <meta name="description" content=""> <title>sap web application links [table view]</title> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2><p class="text-center">sap web application server links </p></h2> <p class="text-center"> <!-- here create links between page view --> <a class="sapmenu" href="f:\link list proj\linkspage\bootstraptabs.html">tab view</a>   <!-- spacing --> <font class="sapmenu">|</font> <!-- insert vert bar seperation -->   <a class="sapmenu" href="f:\link list proj\linkspage\bootstraptable.html">table view</a> </p> <table class="table table-hover"> <thead> <tr> <th width="20%"> </th> <th width="13%">production</th> <th width="13%">staging</th> <th width="13%">development</th> <th width="13%">beta</th> <th width="13%">ref copy</th> </tr> </thead> <tbody> <xsl:for-each select="/sapsyslist/sapsystem[@debug='no']"> <tr> <td>name</td> <td><a href="#" target="_blank">prd</a></td> <td><a href="#" target="_blank">stg</a></td> <td><a href="#" target="_blank">dev</a></td> <td><a href="#" target="_blank">beta</a></td> <td><a href="#" target="_blank">prdref</a></td> </tr> <tr> <td>name</td> <td>insert</td> <td>insert</td> <td>insert</td> <td>insert</td> <td>insert</td> </tr> <tr> <td>name</td> <td>insert</td> <td>insert</td> <td>insert</td> <td>insert</td> <td>insert</td> </tr> <tr> <td>name </td> <td>insert</td> <td>insert</td> <td>insert</td> <td>insert</td> <td>insert</td> </tr> </tbody> </table> <br> <p class="text-center"> <a class="sapmenu" href="f:\link list proj\linkspage\bootstraptabs.html">tab view</a>   <!-- spacing --> <font class="sapmenu">|</font> <!-- insert vert bar seperation -->   <a class="sapmenu" href="f:\link list proj\linkspage\bootstraptable.html">table view</a> </p> </div> </body> </html>along additional tab view:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <!-- html5 doctype --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- setting width runs on mobile or desktop --> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- ie compatibility --> <meta name="description" content=""> <title>sap web application links [tab view]</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2><p class="text-center">sap web application server links </p></h2> <p class="text-center"> <!-- here create links between page view --> <a class="sapmenu" href="f:\link list proj\linkspage\bootstraptabs.html">tab view</a>   <!-- spacing --> <font class="sapmenu">|</font> <!-- insert vert bar seperation -->   <a class="sapmenu" href="f:\link list proj\linkspage\bootstraptable.html">table view</a> </p> <div class="bs-example"> <ul class="nav nav-tabs"> <!-- loop xslt make href part , fill in name --> <li class="active"><a data-toggle="tab" href="#production">production </a></li> <li><a data-toggle="tab" href="#staging">staging</a></li> <li><a data-toggle="tab" href="#development">development</a></li> <li><a data-toggle="tab" href="#beta">beta</a></li> <li><a data-toggle="tab" href="#refcopy">ref copy</a></li> </ul> <div class="tab-content"> <div id="production" class="tab-pane active"> <h3>production</h3> <p>insert systems hyperlinks xml.. </p> </div> <div id="staging" class="tab-pane"> <h3>staging</h3> <p>insert links , systems.</p> </div> <div id="development" class="tab-pane"> <h3>development</h3> <p>insert links , systems.</p> </div> <div id="beta" class="tab-pane"> <h3>beta</h3> <p>insert links , systems.</p> </div> <div id="refcopy" class="tab-pane "> <h3>ref copy</h3> <p><a href="#" target="_blank">link</a></p> </div> </div> </div> <br> <p class="text-center"> <a class="sapmenu" href="f:\link list proj\linkspage\bootstraptabs.html">tab view</a>   <!-- spacing --> <font class="sapmenu">|</font> <!-- insert vert bar seperation -->   <a class="sapmenu" href="f:\link list proj\linkspage\bootstraptable.html">table view</a> </p> </div> </body> </html> how can produce links via xsl inside these bootstrap displays don't have manually copy in each link. (so xml file needs change in future)
xslt file: (what creates table display xml)
<?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:template match="/"> <html> <head> <link rel="stylesheet" type="text/css" href="css/saplinks.css" /> <title>sap web application links [table view]</title> </head> <body> <!-- xslt template file. fill in area xsl elements transform xml xhtml. --> <h2 align="center"> sap web application server links </h2> <p align="center"> <a class="sapmenu" href="default.aspx?format=table.xslt">table view</a>   <font class="sapmenu">|</font>   <a class="sapmenu" href="default.aspx?format=list.xslt">list view</a> </p> <table> <tr> <th width="20%"> </th> <th width="13%">ref copy</th> <th width="13%">beta</th> <th width="13%">development</th> <th width="13%">staging</th> <th width="13%">production</th> </tr> <xsl:for-each select="/sapsyslist/sapsystem[@debug='no']"> <tr> <td> <font class="description"> <xsl:value-of select="@description"/> </font> </td> <td align="center"> <xsl:choose> <xsl:when test="uri[@env='prdref']"> <xsl:for-each select="uri[@env='prdref']"> <xsl:choose> <xsl:when test="shortname!=''"> <xsl:choose> <xsl:when test="@priority='1'"> <a target="_blank" href="default.aspx?env=prdref&name={../@name}&priority=1"> <xsl:value-of select="shortname"/> (primary) </a> <br/> </xsl:when> <xsl:when test="@priority!=''"> <a target="_blank" href="default.aspx?env=prdref&name={../@name}&priority={@priority}"> <xsl:value-of select="shortname"/> (backup) </a> <br/> </xsl:when> <xsl:otherwise> <a target="_blank" href="default.aspx?env=prdref&name={../@name}"> <xsl:value-of select="shortname"/> </a> </xsl:otherwise> </xsl:choose> </xsl:when> <xsl:otherwise> <xsl:choose> <xsl:when test="@priority='1'"> <a target="_blank" href="default.aspx?env=prdref&name={../@name}&priority=1"> default.aspx?env=prdref&name={../@name}&priority=1 (primary) </a> <br/> </xsl:when> <xsl:when test="@priority!=''"> <a target="_blank" href="default.aspx?env=prdref&name={../@name}&priority={@priority}"> default.aspx?env=prdref&name={../@name}&priority={@priority} (backup) </a> <br/> </xsl:when> <xsl:otherwise> <a target="_blank" href="default.aspx?env=prdref&name={../@name}"> default.aspx?env=prdref&name={../@name} </a> </xsl:otherwise> </xsl:choose> </xsl:otherwise> </xsl:choose> </xsl:for-each> </xsl:when> <xsl:otherwise> n/a </xsl:otherwise> </xsl:choose> </td> <td align="center"> <xsl:choose> <xsl:when test="uri[@env='beta']"> <xsl:for-each select="uri[@env='beta']"> <xsl:choose> <xsl:when test="shortname!=''"> <xsl:choose> <xsl:when test="@priority='1'"> <a target="_blank" href="default.aspx?env=beta&name={../@name}&priority=1"> <xsl:value-of select="shortname"/> (primary) </a> <br/> </xsl:when> <xsl:when test="@priority!=''"> <a target="_blank" href="default.aspx?env=beta&name={../@name}&priority={@priority}"> <xsl:value-of select="shortname"/> (backup) </a> <br/> </xsl:when> <xsl:otherwise> <a target="_blank" href="default.aspx?env=beta&name={../@name}"> <xsl:value-of select="shortname"/> </a> </xsl:otherwise> </xsl:choose> </xsl:when> <xsl:otherwise> <xsl:choose> <xsl:when test="@priority='1'"> <a target="_blank" href="default.aspx?env=beta&name={../@name}&priority=1"> default.aspx?env=beta&name={../@name}&priority=1 (primary) </a> <br/> </xsl:when> <xsl:when test="@priority!=''"> <a target="_blank" href="default.aspx?env=beta&name={../@name}&priority={@priority}"> default.aspx?env=beta&name={../@name}&priority={@priority} (backup) </a> <br/> </xsl:when> <xsl:otherwise> <a target="_blank" href="default.aspx?env=beta&name={../@name}"> default.aspx?env=beta&name={../@name} </a> </xsl:otherwise> </xsl:choose> </xsl:otherwise> </xsl:choose> </xsl:for-each> </xsl:when> <xsl:otherwise> n/a </xsl:otherwise> </xsl:choose> </td> <td align="center"> <xsl:choose> <xsl:when test="uri[@env='dev']"> <xsl:for-each select="uri[@env='dev']"> <xsl:choose> <xsl:when test="shortname!=''"> <xsl:choose> <xsl:when test="@priority='1'"> <a target="_blank" href="default.aspx?env=dev&name={../@name}&priority=1"> <xsl:value-of select="shortname"/> (primary) </a> <br/> </xsl:when> <xsl:when test="@priority!=''"> <a target="_blank" href="default.aspx?env=dev&name={../@name}&priority={@priority}"> <xsl:value-of select="shortname"/> (backup) </a> <br/> </xsl:when> <xsl:otherwise> <a target="_blank" href="default.aspx?env=dev&name={../@name}"> <xsl:value-of select="shortname"/> </a> </xsl:otherwise> </xsl:choose> </xsl:when> <xsl:otherwise> <xsl:choose> <xsl:when test="@priority='1'"> <a target="_blank" href="default.aspx?env=dev&name={../@name}&priority=1"> default.aspx?env=dev&name={../@name}&priority=1 (primary) </a> <br/> </xsl:when> <xsl:when test="@priority!=''"> <a target="_blank" href="default.aspx?env=dev&name={../@name}&priority={@priority}"> default.aspx?env=dev&name={../@name}&priority={@priority} (backup) </a> <br/> </xsl:when> <xsl:otherwise> <a target="_blank" href="default.aspx?env=dev&name={../@name}"> default.aspx?env=dev&name={../@name} </a> </xsl:otherwise> </xsl:choose> </xsl:otherwise> </xsl:choose> </xsl:for-each> </xsl:when> <xsl:otherwise> n/a </xsl:otherwise> </xsl:choose> </td> <td align="center"> <xsl:choose> <xsl:when test="uri[@env='stg']"> <xsl:for-each select="uri[@env='stg']"> <xsl:choose> <xsl:when test="shortname!=''"> <xsl:choose> <xsl:when test="@priority='1'"> <a target="_blank" href="default.aspx?env=stg&name={../@name}&priority=1"> <xsl:value-of select="shortname"/> (primary) </a> <br/> </xsl:when> <xsl:when test="@priority!=''"> <a target="_blank" href="default.aspx?env=stg&name={../@name}&priority={@priority}"> <xsl:value-of select="shortname"/> (backup) </a> <br/> </xsl:when> <xsl:otherwise> <a target="_blank" href="default.aspx?env=stg&name={../@name}"> <xsl:value-of select="shortname"/> </a> </xsl:otherwise> </xsl:choose> </xsl:when> <xsl:otherwise> <xsl:choose> <xsl:when test="@priority='1'"> <a target="_blank" href="default.aspx?env=stg&name={../@name}&priority=1"> default.aspx?env=stg&name={../@name}&priority=1 (primary) </a> <br/> </xsl:when> <xsl:when test="@priority!=''"> <a target="_blank" href="default.aspx?env=stg&name={../@name}&priority={@priority}"> default.aspx?env=stg&name={../@name}&priority={@priority} (backup) </a> <br/> </xsl:when> <xsl:otherwise> <a target="_blank" href="default.aspx?env=stg&name={../@name}"> default.aspx?env=stg&name={../@name} </a> </xsl:otherwise> </xsl:choose> </xsl:otherwise> </xsl:choose> </xsl:for-each> </xsl:when> <xsl:otherwise> n/a </xsl:otherwise> </xsl:choose> </td> <td align="center"> <xsl:choose> <xsl:when test="uri[@env='prd']"> <xsl:for-each select="uri[@env='prd']"> <xsl:choose> <xsl:when test="shortname!=''"> <xsl:choose> <xsl:when test="@priority='1'"> <a target="_blank" href="default.aspx?env=prd&name={../@name}&priority=1"> <xsl:value-of select="shortname"/> (primary) </a> <br/> </xsl:when> <xsl:when test="@priority!=''"> <a target="_blank" href="default.aspx?env=prd&name={../@name}&priority={@priority}"> <xsl:value-of select="shortname"/> (backup) </a> <br/> </xsl:when> <xsl:otherwise> <a target="_blank" href="default.aspx?env=prd&name={../@name}"> <xsl:value-of select="shortname"/> </a> </xsl:otherwise> </xsl:choose> </xsl:when> <xsl:otherwise> <xsl:choose> <xsl:when test="@priority='1'"> <a target="_blank" href="default.aspx?env=prd&name={../@name}&priority=1"> default.aspx?env=prd&name={../@name}&priority=1 (primary) </a> <br/> </xsl:when> <xsl:when test="@priority!=''"> <a target="_blank" href="default.aspx?env=prd&name={../@name}&priority={@priority}"> default.aspx?env=prd&name={../@name}&priority={@priority} (backup) </a> <br/> </xsl:when> <xsl:otherwise> <a target="_blank" href="default.aspx?env=prd&name={../@name}"> default.aspx?env=prd&name={../@name} </a> </xsl:otherwise> </xsl:choose> </xsl:otherwise> </xsl:choose> </xsl:for-each> </xsl:when> <xsl:otherwise> n/a </xsl:otherwise> </xsl:choose> </td> </tr> </xsl:for-each> </table> <p align="center"> <a class="sapmenu" href="default.aspx?format=table.xslt">table view</a>   <font class="sapmenu">|</font>   <a class="sapmenu" href="default.aspx?format=list.xslt">list view</a> </p> </body> </html> </xsl:template> </xsl:stylesheet>
Comments
Post a Comment