Open the menu
    ```html

    Using the lum_details control

    Generally speaking, there are not many differences between an XML of the List interface (lum_tabularData) and a Details interface (lum_details). Among them are:

    • There are no links in the XML of the Details interface, so it's not necessary to use the tag <a> in the XSL;
    • There is no list of registered items, as only one <row /> will always arrive within a <data />;
    • Despite the lum_interfaceHeader (header) control arriving in the XML, depending on the solution, it will likely not be used in the XSL;
    • The tag related to the image is <contentImage /> to be assigned an image along with the content. The tag <introductionImage /> can also be used to display an image alongside the introduction. The latter was not used in the example of the Details interface;
    • There is the field <content />, which brings the text of the content field of the registered item.
    AخA
     
    1
    <renderData>
    2
       <controls>
    3
              <control type="lum_details">
    4
                     <control type="lum_interfaceHeader">
    5
                           <data>
    6
                                  <title>Details</title>
    7
                           </data>
    8
                     </control>
    9
                     <data>
    10
                           <row>
    11
                                  <title>Lumis expands operations in Brazil</title>
    12
                                  <publishStartDate>
    13
                                         <value>06/09/06 11:16</value>
    14
                                  </publishStartDate>
    15
                                  <contentImage>
    16
                                         <name>img_logoLumis.gif</name>
    17
                                         <href>data/files/img_logoLumis.gif</href>
    18
                                         <imageLegend>Logo of Lumis</imageLegend>
    19
                                  </contentImage>
    20
                                  <introduction>Lumis (www.lumis.com.br), developer of the software platform for corporate portals, LumisXP Suite, expands operations to southern Brazil, with a newly established business unit in Curitiba.</introduction>
    21
                                  <content><p align="justify">In addition, the company celebrates the acquisition of Copesul – Southern Petrochemical Company, (<a href="http://www.copesul.com.br/">www.copesul.com.br</a>), located in Rio Grande do Sul and responsible for producing about 40% of the ethylene consumed in Brazil.</p></content>
    22
                           </row>
    23
                     </data>
    24
            </control>
    25
    </controls>
    26
    </renderData>

    The XSL to handle the XML of the Details interface can be as follows:

    24
     
    1
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    2
    <xsl:import href="../../../../lumis/doui/style/DouiControls.xsl" ></xsl:import>
    3
    <xsl:output omit-xml-declaration = "yes" method="xml" ></xsl:output>
    4
    <xsl:template match="/">
    5
       <div>
    6
              <xsl:for-each select="//control[@type='lum_details']/data/row">
    7
                     <div><strong><xsl:value-of select="title" ></xsl:value></strong></div>
    8
                     <br /><br />
    9
                     <div>
    10
                           <xsl:if test="contentImage/name != ''">
    11
                                  <img src="{contentImage/href}" border="0" alt="" style="float:left;margin:0 6px 6px 0;">
    12
                                         <xsl:if test="contentImage/imageLegend != ''">
    13
                                                <xsl:attribute name="alt"><xsl:value-of select="contentImage/imageLegend" ></xsl:value></xsl:attribute>
    14
                                         </xsl:if>
    15
                                  </img>
    16
                           </xsl:if>
    17
                           <em><xsl:value-of disable-output-escaping="yes" select="introduction" ></xsl:value></em>                
    18
     <br /><br />
    19
                           <xsl:value-of disable-output-escaping="yes" select="content" ></xsl:value>
    20
                     </div>
    21
              </xsl:for-each>
    22
       </div>
    23
    </xsl:template>
    24
    </xsl:stylesheet>

    Although in the Details interface only one <row / > arrives within <data />, the tag <xsl:for-each /> was used, as it facilitates the calling of items within the loop, already in the correct hierarchy.

    Another option, if the <xsl:for-each /> tag is not used, is:

    • <xsl:value-of select="//control[@type='lum_details']/data/row/XXXX" /> - Where XXXX is the field name (e.g., title, content, etc… )

    You can also create a variable in the XSL, within <xsl:template />:

    • <xsl:variable name= "path" select="//control[@type='lum_details']/data/row" />

    From the variable above, each field would be called in the following way:

    <xsl:value-of select="$path/title" />

    Replacing the normal tags in the above XSL with the specific Lumis tags, you have the following code:

    20
     
    1
    <xsl:stylesheetxmlns:xsl="http://www.w3.org/1999/XSL/Transform"  xmlns:lum="http://www.lumis.com.br/doui" version="1.0">
    2
    <xsl:import href="../../../../lumis/doui/style/DouiControls.xsl" ></xsl:import>
    3
    <xsl:output omit-xml-declaration = "yes" method="xml" ></xsl:output>
    4
    <xsl:template match="/">
    5
       <div>
    6
              <lum:details>
    7
                     <div><strong><lum:field id="title" ></lum:field></strong></div>
    8
                     <br /><br />
    9
                     <div>
    10
                           <xsl:if test="contentImage/name != ''">
    11
                                  <lum:field id="contentImage" isImage="true" style="float:left;margin:0 6px 6px 0;" ></lum:field>
    12
                           </xsl:if>
    13
                           lum:field id="introduction" isHtml="true" />
    14
                           <br /><br />
    15
                           <lum:field id="content" isHtml="true" ></lum:field>
    16
                     </div>
    17
              </lum:details>
    18
       </div>
    19
    </xsl:template>
    20
    </xsl:stylesheet>

    Note that instead of <xsl:for-each />, <lum:details /> was used, and not <lum:loop />. The tag <lum:form /> should not be used in the XSL of the Details interface.

    The layout of the Details interface applying this XSL will look like this:

    using_lum_details_control_001

    To enhance this layout, simply create CSS classes and apply them in the customized XSL, in the tags <div />.

    ```