# Mobile Report Page Experience ## Table of Contents * [Overview](#overview) * [Navigating Report Sections on Mobile](#navigating-report-sections-on-mobile) * [Opening the Section Menu](#opening-the-section-menu) * [Selecting a Section](#selecting-a-section) * [Closing the Menu](#closing-the-menu) * [Report Group Links on Mobile](#report-group-links-on-mobile) * [Using Page Filters on Mobile](#using-page-filters-on-mobile) * [Expanding the Filters Panel](#expanding-the-filters-panel) * [Collapsing Filters After Selection](#collapsing-filters-after-selection) * [Page Load Behavior](#page-load-behavior) * [Desktop Experience Is Unchanged](#desktop-experience-is-unchanged) * [Troubleshooting](#troubleshooting) *** ## Overview On phones and tablets, multi-section report pages (the three-tier layout used on report pages such as school report cards and assessment dashboards) now have a purpose-built mobile layout. The changes address three areas: * **Section navigation** — a clean, accessible section menu opened by a dedicated button near the report title, replacing an earlier approach that was cluttered and showed duplicate site menu items. * **Page filters** — Year, District, and School filter controls are grouped in a collapsible panel that stays out of the way until you need them. * **Page loading** — a spinner appears while the page is loading, so you see one consistent loading state instead of filter controls appearing in isolation before the rest of the page is ready. The desktop layout is not affected by any of these changes. *** ## Navigating Report Sections on Mobile Multi-section report pages organize their content into sections (for example, Academics, Attendance, Graduation Rate). On desktop, these sections appear in a left-hand sidebar. On mobile, the sidebar is hidden — instead, a toggle button appears next to the current section name. ### Opening the Section Menu At the top of the report content area, you will see: * A square toggle button with a menu icon on the left * The name of the currently active section to its right Tap the toggle button to open the section menu. The menu slides in as a panel over the page content, with a semi-transparent backdrop behind it. The menu lists all available top-level section groups. If a group has sub-sections, they appear indented below the group name. The currently active sub-section is highlighted in blue and shown in bold. ### Selecting a Section Tap any section or sub-section name to navigate to it. The menu closes automatically after you select a sub-section. If you tap a top-level group that has sub-sections, the menu stays open so you can choose which sub-section to view. All section items are keyboard and screen-reader accessible — you can navigate the list using the Tab key and activate items with Enter or Space. ### Closing the Menu You can close the menu without making a selection in three ways: * Tap the **Close** link at the top of the menu panel. * Tap the backdrop area outside the panel. * Tap the toggle button again (it switches to a close icon while the menu is open). *** ## Report Group Links on Mobile When an administrator has configured a report section's groups to display as **Links** instead of Tabs (see the [Report Group Navigation Styles](/guides/reporting-system.md#report-group-navigation-styles) section in the Reporting System guide), the mobile layout places those group links below the section title and description on their own line. On desktop, these links appear right-aligned on the same line as the section title. On mobile, right-aligning them would crowd the title text on a narrow screen, so the links wrap to a new line beneath the title area instead. The active link is shown in bold with an underline, matching the desktop appearance. Tapping a group link switches the displayed content to that group, just like tapping a tab would. The URL updates so you can share or bookmark the current group. If a section's groups are configured as Tabs (the default), the tab bar appears as before and this behavior does not apply. *** ## Using Page Filters on Mobile Report pages with page-level filters (such as Year, District, or School selectors) present those filters in a collapsible panel on mobile. The panel is collapsed by default so the filter controls do not push the report content down when you first arrive on the page. ### Expanding the Filters Panel Tap the **Filters** bar at the top of the content area. The bar shows the label "Filters" and a downward-pointing arrow. Tapping it expands the panel to reveal the filter controls. Inside the expanded panel, each filter shows its label and its dropdown control side by side on the same line, making the controls compact and easy to use on a small screen. ### Collapsing Filters After Selection After making your filter selections, tap the **Filters** bar again to collapse the panel. The arrow rotates upward when the panel is open, and back to pointing down when it is closed. Collapsing the panel does not reset your filter selections — the selected Year, District, or School values remain active. Collapsing is cosmetic only, giving the report content more vertical space on screen. *** ## Page Load Behavior When you open a multi-section report page, the page goes through several loading steps before it is ready to display content. Previously, filter controls could appear alone at the top of the page during this initial period, before the rest of the page was ready, creating a disjointed appearance. Now, while the page is loading, a **"Loading page..."** spinner appears in place of the filter controls. Once the page finishes its startup sequence, the spinner is replaced by the full page layout — filters and section content appear together at the same time. This means you will see a brief, consistent loading state on arrival, followed by the complete page. You will not see filter controls floating above empty content. *** ## Desktop Experience Is Unchanged All of the changes described in this guide apply only when the portal detects a mobile or tablet screen size. On desktop: * The left-hand sidebar continues to appear alongside the report content. * Page filters display in their standard horizontal layout above the content area. * The page load and rendering sequence is unchanged. If you access a report page on a desktop browser and resize the window to a narrow width, the portal may switch to the mobile layout automatically. *** ## Troubleshooting **The toggle button is not visible.** The toggle button appears only on mobile and tablet screen sizes, and only after the page has loaded enough to identify the active section. If you are on a desktop browser, the button will not appear — use the left sidebar instead. If you are on a mobile device and do not see the button after the page loads, try refreshing. **Tapping a section name in the menu does not navigate.** Make sure you are tapping the section name text directly. Tapping a top-level group that has sub-sections keeps the menu open so you can choose a sub-section — this is expected behavior. Tap a sub-section name (the indented items) to navigate and close the menu. **The Filters bar is not visible.** The collapsible Filters panel only appears when the report page has page-level filters configured. If a particular report page has no Year, District, or School filters, the panel does not appear. This is not an error. **My filter selections reset when I collapse the panel.** Collapsing the Filters panel does not change your selected values. If your selections appear to have reset, check whether the page itself refreshed (for example, due to a network issue or a browser reload). A page refresh restores the default filter state. **The "Loading page..." spinner shows for a long time.** The loading spinner stays visible until the page finishes its startup sequence, which includes loading page configuration and filter data from the server. If the spinner does not go away within 30 to 60 seconds, the page may be experiencing a connectivity issue. Try refreshing. If the issue persists, contact your administrator. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://nimble.docs.otised.com/guides/mobile-report-experience.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.