Skip to content

Editing

Admins have full control over all aspects of the Custom Portal:

There are two ways to add, edit, and delete content in the Portal:

  1. Sidebar Editor
  2. Admin Console

The Sidebar Editor is the primary editing interface for the Portal. It provides a streamlined way to edit pages, blocks, grids, themes, data sources, and access control -- all from a single panel that displays changes in real time as they are made.

Entering Edit Mode

Edit mode can be activated by pressing CTRL + Right Click on any page to open the Edit Menu, then selecting an edit action. The Sidebar Editor opens on the right side of the page.

The Sidebar Editor is organized into collapsible accordion sections:

  • Theme - Create, duplicate, delete, and edit themes. Configure colors, fonts, spacing, chart themes, and custom CSS. Upload logos and favicons. Manage theme access by user groups.
  • Page (open by default) - Edit the current page's name and slug. Add page-level CSS. Manage JavaScript Snippets. Configure access groups and set default landing pages per group.
  • Grids - Configure page template layout zones (header, footer, left sidebar, right sidebar, content). Toggle zones on and off. Within each zone, add, remove, duplicate, and reorder blocks. Adjust grid sizing units (px or %) and cell sizes.
  • Data Sources - Create, duplicate, and delete data sources directly from the sidebar.
  • Access - Manage user group assignments for the page. Groups control which blocks are visible to which users.

Block Editing

Clicking on a block in the Sidebar Editor or on the page canvas opens the block-specific editor. Each block editor includes:

  • Block Properties - Name, ID (copyable), CSS class, type, and tags.
  • Layout - Width, height, position (X/Y), visibility (hidden toggle), and z-index controls.
  • CSS - A Monaco-based code editor for writing block-specific CSS.
  • Block-Specific Settings - Configuration options specific to the block type (e.g., HTML content, chart settings, filter options, Tableau dashboard URL).
  • Access Groups - Control which user groups can see the block.

Code Editor

The Code Editor is built on the Monaco Editor and provides syntax highlighting and code completion for JavaScript, HTML, and CSS.

There are two editing modes:

  • Inline Editor - A compact editor embedded within the sidebar. Collapsible to save space.
  • External Editor - A full-size editor window opened by clicking the expand icon. Supports multiple tabs for editing CSS, HTML, JavaScript, and SQL simultaneously.

The Code Editor is used throughout the sidebar for editing:

  • Page CSS
  • Theme CSS and custom properties
  • Block CSS
  • Block content (HTML, Markdown)
  • JavaScript Snippets
  • SQL queries (native SQL mode)

The Code Editor remembers which tabs were open when re-entering edit mode.

Edit Menu

As an admin, pressing CTRL + Right Click on any page in the Portal opens up the Edit Menu.

Edit Menu Actions

  • Edit Block - Opens the block editor in the sidebar. Only available when opening the edit menu on a block.
  • Add Block - Opens the Add Block modal. Hovering shows a list of all block types that can be added.
  • Add Existing Block - Opens the Add Block modal to add an existing block to the current grid.
  • Edit Grid - Opens the grid editor in the sidebar.
  • Edit Page - Opens the page editor in the sidebar.
  • Add Page - Creates a new page and opens it in edit mode.
  • Duplicate Page - Duplicates the page and opens the duplicate in edit mode.
  • Data Sources - Opens data source management in the sidebar.
  • Themes - Opens theme management in the sidebar.
  • Refresh - Refreshes the data sources on the page. Same as the Refresh Button block type.
  • Admin - Opens the Admin Console.
  • Shortcuts - Opens the shortcuts modal. See below for more information.
  • Logout - Logs the user out and navigates to the login page.

Shortcuts

Pressing CTRL + ? opens the shortcuts modal.