Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-71943

Dynamic (AJAX) tabs in Moodle LMS

XMLWordPrintable

    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-71943-master
    • Hide

      We have created a demo plugin to test dynamic tabs functionality. It also contains a Behat test that uses the custom Behat step included in the dynamic tabs code. This plugin can be downloaded from https://github.com/dravek/moodle-local_dynamictabsdemo

      1. Download and install this demo plugin in the local folder of your testing instance:

        git clone https://github.com/dravek/moodle-local_dynamictabsdemo.git local/dynamictabsdemo

      2. Go to Site Administration > Development > Dynamic tabs
      3. Confirm you can see two tabs labeled Tab #1 and Tab #2.
      4. Confirm that the config changes system report is shown when loading the page under Tab #1.
      5. Confirm that report pagination works.
      6. Click on the 'Filters' button and the filters form should appear.
      7. Click on Tab #2 and confirm content changes and now the report is not shown. Instead it shows a string saying 'Current time is' with your current date and time.
      8. Click again on Tab #1 and confirm it shows the config changes report again.
      9. Click again on Tab #2 and confirm that the time shown is updated with your current time (H,m,s).
      10. Click again on Tab #1 and once is loaded check that tabs can be accesed directly by URL going to <WWWROOT>/local/dynamictabsdemo/index.php#tab2
      11. Run the automated Behat test in the plugin:

      mdk behat -r --tags=@local_dynamictabsdemo

       

      Show
      We have created a demo plugin to test dynamic tabs functionality. It also contains a Behat test that uses the custom Behat step included in the dynamic tabs code. This plugin can be downloaded from  https://github.com/dravek/moodle-local_dynamictabsdemo Download and install this demo plugin in the local folder of your testing instance: git clone https: //github.com/dravek/moodle-local_dynamictabsdemo.git local/dynamictabsdemo Go to Site Administration > Development > Dynamic tabs Confirm you can see two tabs labeled Tab #1 and Tab #2. Confirm that the config changes system report is shown when loading the page under Tab #1. Confirm that report pagination works. Click on the 'Filters' button and the filters form should appear. Click on Tab #2 and confirm content changes and now the report is not shown. Instead it shows a string saying 'Current time is' with your current date and time. Click again on Tab #1 and confirm it shows the config changes report again. Click again on Tab #2 and confirm that the time shown is updated with your current time (H,m,s). Click again on Tab #1 and once is loaded check that tabs can be accesed directly by URL going to <WWWROOT>/local/dynamictabsdemo/index.php#tab2 Run the automated Behat test in the plugin: mdk behat -r --tags= @local_dynamictabsdemo  

      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

        1. MDL-71943_Step 10.png
          MDL-71943_Step 10.png
          56 kB
        2. MDL-71943_Step 11.png
          MDL-71943_Step 11.png
          124 kB
        3. MDL-71943_Step 3-4.png
          MDL-71943_Step 3-4.png
          96 kB
        4. MDL-71943_Step 5.png
          MDL-71943_Step 5.png
          141 kB
        5. MDL-71943_Step 6.png
          MDL-71943_Step 6.png
          155 kB
        6. MDL-71943_Step 7.png
          MDL-71943_Step 7.png
          49 kB
        7. MDL-71943_Step 8.png
          MDL-71943_Step 8.png
          100 kB
        8. MDL-71943_Step 9.png
          MDL-71943_Step 9.png
          51 kB
        9. Screencast 2021-06-15 112317.gif
          Screencast 2021-06-15 112317.gif
          609 kB
        10. Screenshot from 2021-09-01 18-02-19.png
          Screenshot from 2021-09-01 18-02-19.png
          10 kB

            davidcarrillo David Carrillo
            marina Marina Glancy
            Paul Holden Paul Holden
            Ilya Tregubov Ilya Tregubov
            Angelia Dela Cruz Angelia Dela Cruz
            Votes:
            3 Vote for this issue
            Watchers:
            12 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 3 days, 6 hours
                3d 6h

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.