-
Improvement
-
Resolution: Fixed
-
Blocker
-
4.0
-
MOODLE_400_STABLE
-
MOODLE_400_STABLE
-
MDL-71943-master -
Workplace team will be happy to contribute our AJAX tabs api to Moodle core in 4.0
How it works:
- Each tab has unique URL that can be navigated to directly (in case of Workplace we use anchors but they can be completely different URLs too)
- once user clicks on the tab heading, the page does not reload but the content of the respective tab loads in AJAX request, URL is changed in the browser and gets added to the history (so that the "Back" button works in the browser)
How it is implemented:
- Each tab content is a class that extends a base class (tab) that has methods such as checking access, defining the URL, outputting the content
- There is another class (tabs) that defines the collection of tabs.
- Also there are JS module that switches tabs and the WS that returns the tab contents.
If you have seen Moodle Workplace in action, we have these dynamic tabs in many places, they work great and provide better UX because the page does not reloads too much. Also we have additional little module that allows to add dynamic forms inside the tabs (we already contributed dynamic forms, see MDL-64554). So when user submits the form inside the tab, the page does not reload too. Additional JS can be defined on form submission, for example, switch to the next tab.
Attached a quick demo of the tabs in Workplace
- blocks
-
MDL-70795 Report builder: Implement functionality for creating custom reports
- Closed
- has a non-specific relationship to
-
MDL-73495 Data attributes are not always being passed to individual tabs
- Closed
-
MDL-78350 core/dynamic_tabs JS is trying to add JS within JS
- Closed
-
MDL-64554 Add module for displaying moodleform in a modal window
- Closed
- is documented by
-
MDL-73436 Document dynamic tabs component into the component library
- Closed