dashy/docs/alternate-views/index.html

<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-beta.2">
<link rel="search" type="application/opensearchdescription+xml" title="Dashy" href="/opensearch.xml">
<script src="https://no-track.as93.net/js/script.js" defer="defer" data-domain="dashy.to"></script><title data-react-helmet="true">Alternate Views &amp; Opening Methods | Dashy</title><meta data-react-helmet="true" property="og:url" content="https://dashy.to/docs/alternate-views"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="current"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Alternate Views &amp; Opening Methods | Dashy"><meta data-react-helmet="true" name="description" content="Views"><meta data-react-helmet="true" property="og:description" content="Views"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://dashy.to/docs/alternate-views"><link data-react-helmet="true" rel="alternate" href="https://dashy.to/docs/alternate-views" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://dashy.to/docs/alternate-views" hreflang="x-default"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/assets/css/styles.f020df44.css">
<link rel="preload" href="/assets/js/runtime~main.b0a9fbbf.js" as="script">
<link rel="preload" href="/assets/js/main.5cd754b6.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"dark")}()</script><div id="__docusaurus">
<div><a href="#main" class="skipToContent_OuoZ">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_TMUO themedImage--light_4Vu1 navbar__logo"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_TMUO themedImage--dark_uzRr navbar__logo"><b class="navbar__title">Dashy</b></a><a href="https://github.com/lissy93/dashy" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><a href="https://demo.dashy.to" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Live Demo</a><a class="navbar__item navbar__link" href="/docs/quick-start">Quick Start</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs">Documentation</a></div><div class="navbar__items navbar__items--right"><div class="react-toggle displayOnlyInLargeViewport_cxYs react-toggle--checked react-toggle--disabled"><div class="react-toggle-track" role="button" tabindex="-1"><div class="react-toggle-track-check"><span class="toggle_iYfV">🌙</span></div><div class="react-toggle-track-x"><span class="toggle_iYfV">☀️</span></div><div class="react-toggle-thumb"></div></div><input type="checkbox" checked="" class="react-toggle-screenreader-only" aria-label="Switch between dark and light mode"></div><div class="searchBox_Bc3W"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_TMUO themedImage--light_4Vu1 navbar__logo"><img src="/img/dashy.png" alt="Dashy Logo" class="themedImage_TMUO themedImage--dark_uzRr navbar__logo"><b class="navbar__title">Dashy</b></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a href="https://github.com/lissy93/dashy" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li><li class="menu__list-item"><a href="https://demo.dashy.to" target="_blank" rel="noopener noreferrer" class="menu__link">Live Demo</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/quick-start">Quick Start</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/docs">Documentation</a></li></ul></div></div></div></nav><div class="main-wrapper docs-wrapper doc-page"><div class="docPage_lDyR"><aside class="docSidebarContainer_0YBq"><div class="sidebar_LIo8"><nav class="menu menu--responsive thin-scrollbar menu_oAhv menuWithAnnouncementBar_IVfW" aria-label="Sidebar navigation"><button aria-label="Open menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg class="sidebarMenuIcon_nrF-" width="24" height="24" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Running Dashy</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/quick-start">Quick Start</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/configuring">Configuring</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/management">App Management</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/troubleshooting">Troubleshooting</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Feature Docs</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/icons">Icons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/widgets">Widgets</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/theming">Theming</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/status-indicators">Status Indicators</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/authentication">Authentication</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/searching">Keyboard Shortcuts</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/alternate-views">Alternate Views &amp; Opening Methods</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/multi-language-support">Internationalization</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/backup-restore">Cloud Backup and Restore</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/pages-and-sections">Pages and Sections</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Community</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/showcase">*Dashy Showcase* 🌟</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/contributing">Contributing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/developing">Developing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/development-guides">Development Guides</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Misc</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/privacy">Privacy &amp; Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/changelog">Changelog</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/license">license</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/code-of-conduct">Contributor Covenant Code of Conduct</a></li></ul></li></ul></nav><div class="sidebar-ad"><script async="" src="//cdn.carbonads.com/carbon.js?serve=CWYIC53L&amp;placement=dashyto" id="_carbonads_js"></script></div></div></aside><main class="docMainContainer_r8cw"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_zHA2"><div class="docItemContainer_oiyr"><article><div class="markdown"><header><h1 class="h1Heading_dC7a">Alternate Views &amp; Opening Methods</h1></header><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="views"></a>Views<a class="hash-link" href="#views" title="Direct link to heading">#</a></h2><p>Dashy has three different views:</p><ul><li>Default View - This is the main homepage with sections in a grid layout</li><li>Workspace View - Items displayed on the side, and are launched within Dashy</li><li>Minimal View - A clean + simple tabbed view</li></ul><p>You can switch between views using the dropdown in the top-right corner. Set your chosen Starting View with <code>appConfig.startingView</code>. Click the page title at any time to go back to your selected starting view.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="default"></a>Default<a class="hash-link" href="#default" title="Direct link to heading">#</a></h3><p>This is the main page that you will land on when you first launch the application. Here all of your sections (with items + widgets) are visible in a grid layout.</p><p align="center"><b>Example of Default View</b><br><img width="800" src="https://i.ibb.co/L8YbNNc/dashy-demo2.gif" alt="Demo"></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="workspace"></a>Workspace<a class="hash-link" href="#workspace" title="Direct link to heading">#</a></h3><p>The workspace view displays your links in a sidebar on the left-hand side, and apps are launched inside an iframe without having to leave Dashy. This enables you to use all of your self-hosted apps from one place, and makes multi-tasking easy.</p><p>You can specify a default app to be opened when you land on the workspace, by setting <code>appConfig.workspaceLandingUrl: https://app-to-open/</code>. If this app exists within your sections.items, then the corresponding section will also be expanded.</p><p>You can also opt to keep previously opened websites/ apps open in the background, by setting <code>appConfig.enableMultiTasking: true</code>. This comes at the cost of performance, but does mean that your session with each app is preserved, enabling you to quickly switch between them.</p><p align="center"><b>Example of Workspace View</b><br><img alt="Workspace view demo" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/workspace-demo.gif" width="800"></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="minimal-view"></a>Minimal View<a class="hash-link" href="#minimal-view" title="Direct link to heading">#</a></h3><p>The minimal view aims to be super fast and simple, and can be used as a browser startpage. Items are grouped into a tab view, and the last opened tab will be remembered. Similar to the main view, you can search and launch items just by typing, and right-clicking will show more options (like open in modal, workspace or new tab).</p><p align="center"><b>Example of Minimal View</b><br><img alt="Workspace view demo" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/minimal-view-demo.gif" width="800"></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_WiXH" id="opening-methods"></a>Opening Methods<a class="hash-link" href="#opening-methods" title="Direct link to heading">#</a></h2><p>Dashy supports several different ways to launch your apps. The primary opening method for each app can be specified using the <code>target</code> attribute, with a value of one of the following:</p><ul><li><code>sametab</code> - The app will be launched in the current tab</li><li><code>newtab</code> - The app will be launched in a new tab</li><li><code>top</code> - Opens in the top-most browsing context, useful if your accessing Dashy through an iframe</li><li><code>modal</code> - Launch app in a resizable/ movable popup modal on the current page</li><li><code>workspace</code> - Changes to Workspace view, and launches app</li></ul><p>You can also set a default opening method, which will be applied to all items that don&#x27;t have a specified target, using <code>appConfig.defaultOpeningMethod</code>, to one of the above values.</p><p>Even if the target is not set (or is set to <code>sametab</code>), you can still launch any given app in an alternative method. Either right-click to see all options, or use one of the keyboard shortcuts: Alt + Click will open the modal, and Ctrl + Click will open in a new tab.</p><p align="center"><img width="500" src="https://i.ibb.co/vmZdSRt/dashy-context-menu-2.png"></p><p>If you don&#x27;t like the custom context menu, it can be disabled by setting <code>appConfig.disableContextMenu: true</code>.</p><p>If you get a &#x27;Refused to Connect&#x27; error in the modal or workspace views, then the target app has it&#x27;s X-Frame-Options HTTP set to block requests from embedded content. You can easily fix this by setting this header to ALLOW, for instructions on how to do so, see the <a href="/docs/troubleshootingrefused-to-connect-in-modal-or-workspace-view">Troubleshooting Docs</a>.</p></div><footer class="row docusaurus-mt-lg"><div class="col"><a href="https://github.com/Lissy93/dashy/edit/gh-pages/docs/docs/alternate-views.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_mS5F" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_wj+Z"></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/searching"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Keyboard Shortcuts</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/multi-language-support"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Internationalization »</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_vrFS thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#views" class="table-of-contents__link">Views</a><ul><li><a href="#default" class="table-of-contents__link">Default</a></li><li><a href="#workspace" class="table-of-contents__link">Workspace</a></li><li><a href="#minimal-view" class="table-of-contents__link">Minimal View</a></li></ul></li><li><a href="#opening-methods" class="table-of-contents__link">Opening Methods</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Intro</div><ul class="footer__items"><li class="footer__item"><a href="https://github.com/lissy93/dashy" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li><li class="footer__item"><a href="https://demo.dashy.to" target="_blank" rel="noopener noreferrer" class="footer__link-item">Live Demo</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/quick-start">Quick Start</a></li><li class="footer__item"><a class="footer__link-item" href="/docs">Documentation</a></li></ul></div><div class="col footer__col"><div class="footer__title">Setup Guide</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/deployment">Deploying</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/configuring">Configuring</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/management">Management</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/troubleshooting">Troubleshooting</a></li></ul></div><div class="col footer__col"><div class="footer__title">Feature Docs Pt 1</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/authentication">Authentication</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/alternate-views">Alternate Views</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/backup-restore">Backup &amp; Restore</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/icons">Icons</a></li></ul></div><div class="col footer__col"><div class="footer__title">Feature Docs Pt 2</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/multi-language-support">Language Switching</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/status-indicators">Status Indicators</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/searching">Searching  &amp; Shortcuts</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/theming">Theming</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/developing">Developing</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/development-guides">Development Guides</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/contributing">Contributing</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/showcase">Showcase</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/credits">Credits</a></li></ul></div><div class="col footer__col"><div class="footer__title">Misc</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/privacy">Privacy &amp; Security</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/license">License</a></li><li class="footer__item"><a href="https://github.com/Lissy93/dashy/blob/master/.github/LEGAL.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Legal</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/code-of-conduct">Code of Conduct</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/changelog">Changelog</a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright"><a href="https://dashy.to">Dashy</a> - The Self-Hosted Dashboard for your Homelab<br>License under <a href="https://github.com/Lissy93/dashy/blob/master/LICENSE">MIT</a>. Copyright © 2024 <a href="https://aliciasykes.com">Alicia Sykes</a></div></div></div></footer></div>
<script src="/assets/js/runtime~main.b0a9fbbf.js"></script>
<script src="/assets/js/main.5cd754b6.js"></script>
</body>
</html>