Notice: In order to edit this ticket you need to be either: a Product Owner, The owner or the reporter of the ticket, or, in case of a Task not yet assigned, a team_member"

User Story #7339 (closed)

Opened 8 years ago

Closed 7 years ago

Modular Tab panes

Reported by: wmoore Owned by: wmoore
Priority: major Milestone: Unscheduled
Component: Web Keywords: n.a.
Cc: atarkowska, cxallan Story Points: n.a.
Sprint: n.a. Importance: n.a.
Total Remaining Time: 0.0d Estimated Remaining Time: n.a.


In order to address use cases that involve displaying custom content in the centre (or right-hand) panels E.g:

  • display "dataset split view" in center panel
  • show main image viewer in center panel
  • table view of images with annotations etc...

we need a way for users to add their page to the appropriate panel. Tabs would seem an obvious choice.

This could be configured in SETTINGS using a list of "Tab Name":"url_name" pairs. Django reverse(url_name) with no parameters would define a url to load into that tab, as is currently done with the metadata and preview tabs in the right-hand panel.

E.g. above examples

CENTER_PANEL_TABS = [["Dataset Split View", "webtest_dataset_split_view"], 
 ["Annotation Table", "webapp_ann_table"]]

Clicking the tab loads the defined url. This page can then respond to current status or changes in tree selection, to display currently selected P/D/I etc.

Attachments (1) (16.5 MB) - added by wmoore 8 years ago.
Demo of tabs functionality

Change History (6)

comment:1 Changed 8 years ago by wmoore

Links configured in have been used for main tabs in webclient/webadmin.

comment:2 Changed 8 years ago by wmoore

Key issue when using configurable tabs to 'load' content with jQuery is how to handle any callbacks. E.g. in the current right-hand panel, when the Acquisition metadata (or Preview) is loaded, a method is called equivalent to the document.ready call:

$('#acquisition').click(function() {
    var $tab = $("#metadata_tab");
    var href = $("#acquisition-link").attr('href');
    if (!acquisition_load) {
        $tab.load(href, function() {
        acquisition_load = true;

Here, the acquisition_loaded() method is defined within a <script> tag in the page that is loaded, and is used to format etc. the panel content.

comment:3 Changed 8 years ago by wmoore

  • Type changed from Task to User Story

Have now used jquery-ui tabs on the left and right panels, configured as links on left and ajax loading on right. Issue of 'callback' above seems to be solved. Just need to use $(document).ready() as the first code in a <script> tag.

Changed 8 years ago by wmoore

Demo of tabs functionality

comment:4 Changed 8 years ago by agilo

  • Status changed from new to accepted

Updated status, related task in progress

comment:5 Changed 7 years ago by wmoore

  • Resolution set to fixed
  • Status changed from accepted to closed

This is not yet merged into develop, but there is no further work planned for the branch.


Note: See TracTickets for help on using tickets. You may also have a look at Agilo extensions to the ticket.

1.3.13-PRO © 2008-2011 Agilo Software all rights reserved (this page was served in: 0.95626 sec.)

We're Hiring!