This feature lets you:

• Embed a web part or visualization in an HTML wiki page or message.
• Combine static and dynamic content in a single page. This eliminates the need to write custom modules even when complex layout is required.
• Embed wiki page content in other wiki pages to avoid duplication of content (and thus maintenance of duplicate content). For example, if a table needs to appear in several wiki pages, you can create the table on a separate page, then embed it in multiple wiki pages.
• Indicate JavaScript or CSS files that are required for code or styles on the page; LabKey will ensure that these dependencies are loaded before your code references them.

Security rules are respected for inserted web parts. To see inserted content, a reader must have viewing permissions for both:

• The displaying page.
• The source container for the content inserted in the page.

Embed Web Parts

To embed a web part in an HTML wiki page, open the page for editing and go to the HTML Source tab. (Do not try to preview using the Visual tab, because this will cause <p> tags to be placed around your script, often breaking it.) Use the following syntax, substituting appropriate values for the substitution parameters in single quotes:

${labkey.webPart(partName='PartName', showFrame='true|false', namedParameters…)}

Web Parts

You can find the web part names to use as the 'partName' argument in the Web Part Inventory. These names also appear in the UI in the Select Web Part drop-down menu.

Configuration Properties for Web Parts

The Web Part Configuration Properties page covers the configuration properties that can be set for various types of web parts inserted into a web page using the syntax described above

Examples and Demos

You can find a page of examples, showing web parts of a number of types embedded in the topic: Examples: Embedded Web Parts. That page includes a view source link to the HTML source for its samples.

Wiki Example. To include a wiki page in another wiki page, use:

${labkey.webPart(partName='Wiki', showFrame='false', name='includeMe')}

where includeMe is the name of another wiki page in the same folder.

For a wiki page in a different container, use the webPartContainer property. To get the webPartContainer for the source container, see Web Part Configuration Properties.

${labkey.webPart(partName='Wiki', showFrame='false', webPartContainer='e7a158ef-ed4e-1034-b734-fe851e088836' name='includeMe')}

Search Example. The following snippet embeds a Search web part in a wiki page. Setting location='right' means that the narrow wiki part is used, so the web part will display in the right column of a page.

${labkey.webPart(partName='Search', showFrame='false', location='right', 
      includeSubFolders='false')}

Files Example. The following snippet embeds a Files web part in a wiki page.

<div id='fileDiv'/>
<script type="text/javascript">
    LABKEY.requiresScript("fileBrowser.js");
    LABKEY.requiresScript("FileContent.js");
    
    var wikiWebPartRenderer = new LABKEY.WebPart({
      partName: 'Files',
      renderTo: 'fileDiv'
    });
    wikiWebPartRenderer.render();
</script>

Table of Contents Example.

${labkey.webPart(partName='Wiki Table of Contents', showFrame='false')}

Embed Client Dependencies

You can also embed dependencies on other JavaScript or CSS files into your wiki using similar syntax.

${labkey.dependency(path='path here')}

To reference files uploaded the the File Repository, you can use the full URL to the file, where MYPROJECT/MYFOLDER refers to your container path:

<div>
${labkey.dependency(path='http://my.server.com/_webdav/MYPROJECT/MYFOLDER/@files/myScript.js')} 
${labkey.dependency(path='http://my.server.com/_webdav/MYPROJECT/MYFOLDER/@files/myStyle.css')} 
</div>

To determine the full path to a file in the repository:

• Get the download link, as described here View and Share Files
• Trim the query string from the download link, that is everything after the '?', in this case, '?contentDisposition=attachment'.

<div>
${labkey.dependency(path='_webdav/MYPROJECT/MYFOLDER/@files/myScript.js')} 
${labkey.dependency(path='_webdav/MYPROJECT/MYFOLDER/@files/myStyle.css')} 
</div>

See also Declare Dependencies.

AJAX Example. Use the client API to dynamically AJAX webparts into an HTML page:

<div id='tocDiv'/><br/> 
  <div id='searchDiv'/> 
  <script type="text/javascript"> 
    var tocRenderer = new LABKEY.WebPart({ 
        partName: 'Wiki TOC', 
        renderTo: 'tocDiv' 
        }) 
    tocRenderer .render(); 

    var tocRenderer = new LABKEY.WebPart({ 
        partName: 'Search', 
        renderTo: 'searchDiv' 
        }) 
    tocRenderer .render(); 
  </script>

Related Topics

• Web Part Inventory
• Wiki User Guide
• Wiki Admin Guide
• LABKEY.WebPart API Reference