OpenForum Markup Reference

This reference documents the OpenForum markup language used in page.content files. OpenForum uses a custom markup syntax that gets converted to HTML through the DefaultRenderer, plus dynamic JavaScript features for interactive content.

Headers

Use exclamation marks for headers:

• Header 1 (H1)

• Header 2 (H2)

• Header 3 (H3)

Text Formatting

Basic text formatting options:

• Bold text
• Italic text
• Strikethrough text
• ^{Superscript text}

Lists

Unordered lists use asterisks:

• Bullet point item 1
• Bullet point item 2
• Bullet point item 3

Ordered lists use hash symbols:

1. Numbered list item 1
2. Numbered list item 2
3. Numbered list item 3

Links

Various link formats:

• Link text
• External link
• Link opening in new tab
• /path/to/page (uses page path as link text)

Code Blocks

Use triple braces for code: This is a code block Multiple lines preserved No markup processing inside

Special Blocks

This is a paragraph block

This text is centered

Tables

Use pipe symbols for tables:

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 2 Cell 1	Row 2 Cell 2	Row 2 Cell 3

Interactive Elements

• Checkbox with ID
• Radio button with group and value

Special Markup

Horizontal rule:

---

Line break:

Comments: Raw text (no processing): This text is not processed for markup Raw text goes here unchanged Sections: This is a section that can be cut/separated

Extensions

OpenForum provides many built-in extensions for enhanced functionality. Extensions are called using undefined syntax:

Common Extensions

• • Content & Layout:**
• [{InsertPage page="/path/to/page"}] - Insert content from another page
• [{InsertFile fileName="filename.txt"}] - Insert file content
• [{MarkDown fileName="file.md"}] - Render Markdown content
• [{MarkDown url="http://example.com/file.md"}] - Render remote Markdown
• [{Banner text="Banner message"}] - Display banner message
• [{DisplayCard title="Title" content="Content"}] - Create display card

• • Interactive Elements:**
• [{ActionButton action="ActionName" text="Button Text"}] - Button that triggers actions
• [{Button title="Click Me" function="myFunction"}] - JavaScript function button (deprecated)
• [{Form name="myForm" data="field definitions"}] - Generate forms
• [{InputField name="fieldName" type="text"}] - Input field
• [{WysiwygInput name="editor"}] - Rich text editor

• • Data & Tables:**
• [{Table name="tableName" data="column definitions"}] - Data table
• [{DataTable name="tableName" data="column definitions"}] - Enhanced data table
• [{AttachmentsList pageName="/path"}] - List page attachments
• [{ChildPagesList pageName="/path"}] - List child pages

• • Time & Utility:**
• [{Clock}] - Display current time
• [{CountDown counter="name" action="function" period="10"}] - Countdown timer
• [{Date}] - Display current date
• [{CrumbTrail}] - Navigation breadcrumb trail

• • Advanced:**
• [{Popup id="popupId" title="Popup Title"}] - Modal popup
• [{Redirect url="/new/path"}] - Page redirect (executes immediately!)
• [{Icon name="iconName"}] - Display icons
• [{Help topic="helpTopic"}] - Context help

• • Example Usage:**
[ {InsertPage page="/OpenForum/PageTemplates/Example"} {ActionButton action="Rebuild" text="Rebuild Page"} {Clock} {MarkDown fileName="readme.md"} ]}
• Full Extension List:**
ActionButton, ActionInput, AttachmentsList, Banner, Bookmarklet, Button, CTABanner, ChildPagesList, ChildrenContentsPage, Clock, ContrastBlock, CountDown, CrumbTrail, DataTable, Date, DisplayCard, Form, Help, HttpsOnly, Icon, ImageDisplayCard, Info, InputBoolean, InputField, InputFileName, InsertFile, InsertNotes, InsertPage, InsertSourceFile, LinkButton, ListField, MarkDown, MarkPage, OneTimePopup, OpeningTimes, Popup, RecaptchaButton, Redirect, RenderFile, ScriptClip, ServerActionButton, Table, TextDisplayCard, UploadFileInputField, WysiwygInput See /OpenForum/Extensions for complete documentation and examples of each extension.

Template Variables

Available in page templates:
• /HomeLab/Claude/OpenForumContentGenerationNotes - Current page name
• OpenForum Content Generation Notes - Page title
• Claude AI Assistant - Page author
• 1757954754034 - Last modified time
• &content; - Main page content
• - Insert file content

Dynamic JavaScript Features

OpenForum provides powerful dynamic features that combine markup with JavaScript:

Variable Embedding

Embed JavaScript variable values that update automatically:

• Use double braces: Double curly brace variable Double curly brace syntax
• Variables must be defined in page.js or globally
• Updates happen automatically during scan cycles

Example markup: <div> Current time: Double curly brace currentTime Double curly brace Counter value: Double curly brace counter Double curly brace </div> Example page.js: var currentTime = new Date().toLocaleString(); var counter = 0; // Update every second setInterval(function() { currentTime = new Date().toLocaleString(); counter++; }, 1000);

Two-Way Data Binding with of-id

Link HTML input elements directly to JavaScript variables:

• Add of-id="variableName" to any input element
• Changes in the input automatically update the variable
• Changes to the variable automatically update the input

Example: <form> <input type="text" of-id="userName" placeholder="Enter name" /> <input type="email" of-id="userEmail" placeholder="Enter email" /> <select of-id="userRole"> <option value="admin">Admin</option> <option value="user">User</option> </select> </form> <!-- Display the values --> <div>Name: Double curly brace userName Double curly brace, Email: Double curly brace userEmail Double curly brace, Role: Double curly brace userRole Double curly brace</div>

Dynamic Lists with of-repeatFor

Generate repeated HTML elements from JavaScript arrays:

• Add of-repeatFor="item in arrayName" to repeat elements
• Access item properties using Double curly brace item.propertyName Double curly brace
• Array must be defined as a JavaScript variable

Example: <table> <thead> <tr> <th>Name</th> <th>Status</th> </tr> </thead> <tbody> <tr of-repeatFor="item in itemList"> <td>Double curly brace item.name Double curly brace</td> <td>Double curly brace item.status Double curly brace</td> </tr> </tbody> </table> Example page.js: var itemList = [ {name: "Item 1", status: "Active"}, {name: "Item 2", status: "Pending"}, {name: "Item 3", status: "Complete"} ];

Mixing HTML with Markup

You can freely mix HTML tags within OpenForum markup:

• Use standard HTML tags for layout and styling
• Combine with OpenForum markup for content
• Add of-* attributes to any HTML element
• Use Double curly brace variables Double curly brace within HTML content (not attributes)

Example: <div class="alert alert-info"> !!Important Notice ((This is a paragraph block within HTML div)) <form> <div class="form-group"> <label>Your name:</label> <input type="text" of-id="formUserName" class="form-control" /> </div> </form> [[Welcome Double curly brace formUserName Double curly brace!]] </div>

File Structure

Each OpenForum page consists of:

• • • page.content** - Main markup content with OpenForum syntax
• • page.js** - JavaScript variables and functions for dynamic features
• • data.json** - Page metadata (optional)
• • page.html** - Generated HTML (auto-created by page builder)
• • page.html.fragment** - Generated content fragment (auto-created)

Best Practices

• • Static Content:**
• Use descriptive link text rather than "click here"
• Structure content with appropriate headers
• Use callout boxes
  for important information
• Place code in proper code blocks
• Test links to ensure target pages exist
• Use comments to document complex markup

• • Dynamic Content:**
• Initialize JavaScript variables in page.js before using Double curly brace variable Double curly brace
• Use meaningful variable names that match their purpose
• Keep of-repeatFor arrays updated for real-time display
• Avoid undefined variables to prevent errors
• Use OpenForum.getObject() to programmatically access of-id elements

• • Performance:**
• Limit the frequency of variable updates to avoid excessive DOM updates
• Use of-exclude attribute to skip scanning of static content areas
• Optimize of-repeatFor arrays for large datasets

Common Patterns

• • Simple Dynamic Page:**
!!!!My Dynamic Page ((This page demonstrates real-time updates.)) !!Current Status Last updated: Double curly brace lastUpdate Double curly brace !!User Input <input type="text" of-id="messageText" placeholder="Enter message" /> <button onclick="updateMessage()">Update</button> !!Display [[Current message: Double curly brace displayMessage Double curly brace]]
• Corresponding page.js:**
// Initialize variables var lastUpdate = new Date().toLocaleString(); var messageText = ""; var displayMessage = "No message yet"; // Update function function updateMessage() { displayMessage = messageText || "No message entered"; lastUpdate = new Date().toLocaleString(); } This documentation covers OpenForum markup syntax and dynamic JavaScript features based on DefaultRenderer v1.08 and OpenForum JavaScript framework v1.17.2.