You can embed live content in wiki pages by inserting web parts or dependencies using substitution syntax. For example, you might embed a live table of currently open issues on a status page, or include a key visualization to illustrate a point in the description of your research protocol.

• Overview
• Embed Web Parts in Wikis
• Web Parts and Properties
• Examples
• Embed Client Dependencies

Overview

This feature lets you:

• Embed a web part or visualization in an HTML wiki page.
• 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 elements may be removed.) Use the following syntax, substituting appropriate values for the substitution parameters in single quotes:

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

For example, if you wanted to have a wiki with a bit of text, then a query, followed by some more text, you could nest the web part in other HTML. In this example, we'll show a list without the query web part framing:

<p>This is some text about the query shown here, the Languages list in this folder:</p>

${labkey.webPart(partName='Query', schemaName = 'lists', queryName = 'Languages', showFrame = 'false')}

<br />
<p>More text.</p>

Web Parts and Properties

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

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 examples.

Report

${labkey.webPart(partName='Report', 
	reportName='My Samples Report',
	queryName ='MySamples', 
	schemaName ='samples', 
	showFrame='false', 
	title = 'Report Title'
)}

Wiki Nesting Example:

To include a wiki page in another wiki page, use the following (the page name in the folder is 'includeMe'):

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

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')}

List Examples:

You can show a list in several ways. You can use a Query web part showing a list:

${labkey.webPart(partName='Query', schemaName = 'lists', queryName = 'MyList', showFrame = 'false')}

Or a List web part directly:

<div id="targetDiv"></div>
<script>
var wp = new LABKEY.WebPart({ renderTo: 'targetDiv', partName: 'List - Single', partConfig: { listName: 'MyList'}});
wp.render();
</script>

Assay Runs Example:

For assay runs, you need to use viewProtocolId, equivalent to the RowId of the assay design. It's in the URL for most assay pages.

<div id="targetDiv2"></div>
<script>
var wp2 = new LABKEY.WebPart({ renderTo: 'targetDiv2', partName: 'Assay Runs', partConfig: { viewProtocolId: 26027}});
wp2.render();
</script>

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" nonce="<%=scriptNonce%>">
    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')}

Video Examples:

To embed a video in an HTML-format page, you can use an <iframe> tag (the Platform Developer role is required):

<iframe width="750" height="500" src="https://www.youtube.com/embed/JEE4807UHN4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

To embed the same video in a wiki-syntax page, you can use this syntax:

{video:https://www.youtube.com/embed/JEE4807UHN4|height:500|width:750}

This topic in the Sample Manager documentation uses the latter example:

• Sample Finder

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" nonce="<%=scriptNonce%>"> 
    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

• Examples: Embedded Web Parts
• Web Part Inventory
• Web Part Configuration Properties
• Wiki User Guide
• Wiki Admin Guide
• LABKEY.WebPart API Reference