Ressources web de feuille de style (XSL)

  • Article

Utilisez les ressources web de feuille de style (XSL) pour transformer des données XML.

Fonctionnalités des ressources web XSL

Utilisez les ressources web XSL pour transformer des données XML utilisées par votre solution.

Les ressources web suivantes fonctionnent ensemble pour restituer une page qui affiche une table à l’aide des données de la ressource web XML. Les fichiers source de ces ressources web font partie de l’exemple d’importation de ressources web qui se trouve dans le dossier filestoimport. Téléchargez l’exemple Importer des fichiers en tant que ressources web.

Ressource web HTML : sample_/ImportWebResources/Content/ShowData.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
<title></title>  
<script src="Script/Script.js" type="text/javascript"></script>  
<link href="CSS/Styles.css" rel="stylesheet" type="text/css" />  
</head>  
<body onload="SDK.ImportWebResources.showData()">  
<div id="results" />  
</body>  
</html>

Ressource web XSL : sample_/ImportWebResources/XSL/Transform.xslt

<?xml version="1.0" encoding="utf-8"?>  
<xsl:stylesheet version="1.0"  
               xmlns:xsl="https://www.w3.org/1999/XSL/Transform"  
               xmlns:msxsl="urn:schemas-microsoft-com:xslt"  
               exclude-result-prefixes="msxsl"  
>  
<xsl:output method="xml"  
            indent="yes"/>  
 
<xsl:template match="@* | node()">  
 <xsl:copy>  
  <xsl:apply-templates select="@* | node()"/>  
 </xsl:copy>  
</xsl:template>  
 
<xsl:template match="people">  
 <xsl:element name="table">  
  <xsl:element name="thead">  
   <xsl:element name="tr">  
    <xsl:element name="th">  
     <xsl:text>First Name</xsl:text>  
    </xsl:element>  
    <xsl:element name="th">  
     <xsl:text>Last Name</xsl:text>  
    </xsl:element>  
   </xsl:element>  
  </xsl:element>  
  <xsl:element name="tbody">  
   <xsl:apply-templates />  
  </xsl:element>  
 </xsl:element>  
 
</xsl:template>  
 
<xsl:template match="person">  
 <xsl:element name="tr">  
  <xsl:element name="td">  
   <xsl:value-of select="@firstName"/>  
  </xsl:element>  
  <xsl:element name="td">  
   <xsl:value-of select="@lastName"/>  
  </xsl:element>  
 </xsl:element>  
 
</xsl:template>  
 
</xsl:stylesheet>

Ressource web XML : sample_/ImportWebResources/Data/Data.xml

<?xml version="1.0" encoding="utf-8" ?>  
<people>  
<person firstName="Apurva"  
        lastName="Dalia" />  
<person firstName="Ofer"  
        lastName="Daliot" />  
<person firstName="Jim"  
        lastName="Daly" />  
<person firstName="Ryan"  
        lastName="Danner" />  
<person firstName="Mike"  
        lastName="Danseglio" />  
<person firstName="Alex"  
        lastName="Darrow" />  
</people>

Ressource web de script : sample_/ImportWebResources/Script/Script.js

//If the SDK namespace object is not defined, create it.  
if (typeof (SDK) == "undefined")  
{ SDK = {}; }  
// Create Namespace container for functions in this library;  
SDK.ImportWebResources = {  
dataFile: "Data/Data.xml",  
transformFile: "XSL/Transform.xslt",  
showData: function () {  
 
 //Create an XML document from the Data.xml file  
 var dataXml = new ActiveXObject("Msxml2.DOMDocument.6.0");  
 dataXml.async = false;  
 dataXml.load(this.dataFile);  
 
 //Create an XML document from the Transform.xslt file  
 var transformXSLT = new ActiveXObject("Msxml2.DOMDocument.6.0");  
 transformXSLT.async = false;  
 transformXSLT.load(this.transformFile);  
 
 // Set the innerHTML of the results area to the output of the transformation.  
 var resultsArea = document.getElementById("results");  
 resultsArea.innerHTML = dataXml.transformNode(transformXSLT);  
}  
 
}

Ressource web CSS : sample_/ImportWebResources/CSS/Styles.css

body  
{  
   font-family: Calibri;  
}  
table  
{  
   border: 1px solid gray;  
   border-collapse: collapse;  
}  
th  
{  
   text-align: left;  
   border: 1px solid gray;  
}  
td  
{  
   border: 1px solid gray;  
}

Voir aussi

Ressources web pour Dynamics 365 Customer Engagement (on-premises)
Utilisation des ressources web de page web (HTML)
Utilisation des ressources web de feuille de style (CSS)
Utilisation des ressources web de script (JScript)
Utilisation des ressources web de données (XML)
Utilisation des ressources web d’image (JPG, PNG, GIF)
Utilisation des ressources web Silverlight (XAP)