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

Dynamic (AJAX) tabs in Moodle LMS

    XMLWordPrintable

    Details

    • Testing Instructions:
      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  
    • Affected Branches:
      MOODLE_400_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-71943-master

      Description

      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

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              davidmatamoros David Matamoros
              Reporter:
              marina Marina Glancy
              Peer reviewer:
              Paul Holden Paul Holden
              Participants:
              Component watchers:
              Andrew Lyons, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan
              Votes:
              3 Vote for this issue
              Watchers:
              9 Start watching this issue

                Dates

                Created:
                Updated:

                  Time Tracking

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