Notice: This application will enforce Multi-factor authentication (MFA) for NIH users beginning the evening of Wed Aug 3rd.
NIH | National Cancer Institute | NCI Wiki  

Contents of this page:

Wiki Features

This catalog demonstrates selected features available on the NCI Wiki. For exploratory purposes, this catalog also includes examples of these features implemented using a site generator (or other tools). 

User Guides

Click the following links to view some of the technical documentation our team has written. 

More Focused Wiki Space Search

The default wiki search, near the top of the page, searches the entire wiki (all wiki spaces to which you have access). If a wiki page author or editor inserts the Page Tree macro and selects the Search Box Above Page Tree option, the wiki page displays an additional search feature. This searches only within a specific page family. 

Wiki page showing a site search box above the page tree.
Wiki Space Search macro in Confluence

A similar option is the Page Tree Search macro. This macro focuses the search to a specific page family, just as the Page Tree macro does, but it displays only a search box (not the list of links). For more information, refer to Definition of Child Page, Wiki Space, Page Family and Putting a List of Child Pages on a Page.

Animated GIF

We created the following animated GIF using SnagIt 2018. For information on accessibility for animated GIF files, refer to the following page:

https://www.slideshare.net/DigitalGov/accessibility-for-animated-gifs-victoria-wales-us-agov-gobiernousagov Exit Disclaimer logo


Animated GIF

Confluence Gliffy Flowchart

We created the following diagram within this Confluence page, using a Gliffy macro.

gliffy-flowchart
Sample Gliffy Flowchart

For information, refer to Gliffy Diagram Demonstration

Expand/Collapse Image via Confluence Macro

We inserted an Expand macro here, and an image inside it. By default, the macro displays a link. After you click the link, the macro also displays the image. 

 

For information, refer to Hiding Information so Readers Can View It as Needed

Thumbnail Image

We inserted a 909px image here and reduced the size to 100px to produce a thumbnail, in the generic sense of the word. The reader can click the thumbnail to view the full-size image.

Trial Data Verification page in CTRP
Thumbnail image

For more information, refer to Changing the Display Size of an Image

(Another type of wiki thumbnail behaves differently, as mentioned in Uploading and Linking to an Attachment.) 

Presentation / Slideshow

The Office PowerPoint macro in Confluence allows you to display your presentation in a viewer with next and back buttons, rather than showing a simple preview. People viewing the page don't need PowerPoint installed to be able to see the presentation. 


PowerPoint file embedded into Confluence

Static Site Generator Features

Static site generators are applications that run on the command line and compile a website. For example, you may have various pages defining a layout, some "include" files, a configuration file, and your content files. The technical writers would in this case create documentation in markdown (text files) stored in GitHub. Each documentation change would compile on the fly. This method is innovative and would not involve Confluence at all. No projects at CBIIT currently use this method but we include it in this catalog to better communicate the potential range of our services. For more information about static site generators for documentation, see https://idratherbewriting.com/2015/02/27/static-site-generators-start-to-displace-online-cmss/ Exit Disclaimer logo

Thumbnail in DocDock Markdown

The following code block demonstrates implementation of a thumbnail for Hugo DockDock, as described in Resizing image Exit Disclaimer logo :

1. Click the **Search Clinical Trials** tab. Or, on the toolbar, click **Search** > **Clinical Trials**. The Search Clinical Trials page appears.
    ![Search Clinical Trials page](https://wiki.nci.nih.gov/download/attachments/333338131/trial-search.png?height=80px)
1. In the various fields, specify one or more search criteria.

The above code produces the following results:

  • By default, the image appears as indicated in the HTTP parameter: 
    The image appears as indicated in the HTTP parameter.
  • After click, the image expands to fill the window.

Expand as DocDock Shortcode Markdown

The following code block demonstrates implementation of the Expand shortcode for Hugo DockDock:

1. Click the **Search Clinical Trials** tab. Or, on the toolbar, click **Search** > **Clinical Trials**. The Search Clinical Trials page appears.
{{%expand "Click for Screen Shot" %}}
![Search Clinical Trials page](https://wiki.nci.nih.gov/download/attachments/333338131/trial-search.png)
{{% /expand%}}
1. In the various fields, specify one or more search criteria.

The above code produces the following results:

  • By default, the image is hidden: 
    With Expand shortcode, by default, screen shot is hidden.
  • After the initial click, the image is visible:
    With Expand shortcode, after initial click, the screenshot is visible.

Presentation / Slideshow via Markdown

Markdown to Presentation / Slideshow Exit Disclaimer logo  lists some tools for using markdown to create presentations or slideshows. The following files demonstrate one of them, Slide Show (S9) Exit Disclaimer logo :

Markdown Flowchart via DocDock Mermaid Shortcode

In a Hugo project with the DocDock theme, the following markdown code produces a diagram.

{{<mermaid align="left">}}
graph TD;
    A(Start) --> B
    B[Submitter submits trial.] --> |Trial has Submitted status.| C{Submission complete?}
    C -->|No| D[CTRO asks submitter for information.]
    D -->|Trial is on hold.| E[Submitter provides requested information.]
    E -->|Trial is off hold.| C
    C -->|Yes| F(End)

{{< /mermaid >}}

Flowchart with decision and loop

Flowchart created with Markdown and Mermaid Shortcode

Markdown Flowchart via Mermaid Live Editor

In the Mermaid Live Editor Exit Disclaimer logo , the following markdown code produces a similar diagram.

graph TD;
    A(Start) --> B
    B[Submitter submits trial.] --> |Trial has Submitted status.| C{Submission complete?}
    C -->|No| D[CTRO asks submitter for information.]
    D -->|Trial is on hold.| E[Submitter provides requested information.]
    E -->|Trial is off hold.| C
    C -->|Yes| F(End)

Flowchart created with Markdown and Mermaid Live Editor

  • No labels