FHIR Chat · direct links to tab content on profile pages · IG creation

Stream: IG creation

Topic: direct links to tab content on profile pages

Eric Haas (Sep 03 2019 at 04:34):

Can not link directly to tab in my profile pages. The FHIR spec does allow this. Which file in the core spec contains the javascript to do this?

Eric Haas (Sep 03 2019 at 04:36):

e.g. https://build.fhir.org/ig/HL7/US-Core-R4/StructureDefinition-us-core-medicationrequest.html#tabs-summ

does not go directly to the tab but to the page.

Lloyd McKenzie (Sep 03 2019 at 05:01):

In the core spec, the top-level tabs are actually distinct pages

Lloyd McKenzie (Sep 03 2019 at 05:03):

To the best of my knowledge, you can't link to anything that's in a Javascript controlled tab. I.e. you can't link to a location in the snapshot or differential diagrams. You can only link to the mapping tab page or the definitions tab page or the 'content' tab page.

Eric Haas (Sep 03 2019 at 05:16):

try this: http://build.fhir.org/basic.html#tabs-uml

and this : http://build.fhir.org/basic.html#tabs-struc

Eric Haas (Sep 03 2019 at 05:16):

notice how the view changes

Eric Haas (Sep 03 2019 at 05:19):

that is from my understanding a bootstrap + javascript thing

Eric Haas (Sep 03 2019 at 05:20):

that is the behavior I'm trying to get.

Eric Haas (Sep 03 2019 at 05:21):

The links/ids are there ( ie. when you do a copy link adress you get them)

Lloyd McKenzie (Sep 03 2019 at 14:11):

#tabs-uml doesn't get me anywhere. Nor does #tabs-json, etc.

Michel Rutten (Sep 03 2019 at 14:37):

I think this is possible with a bit of additional logic in the onload JavaScript.

Eric Haas (Sep 03 2019 at 16:34):

Yes it is possible and I tried a couple of solutions to no avail - but since it works in the the FHIR spec I'd like to look there

Eric Haas (Sep 03 2019 at 17:02):

#tabs-uml doesn't get me anywhere. Nor does #tabs-json, etc.

Lloyd is correct ( ...again) this does not work in the main build as I thought it did... I will investigate further javascript solutions

Jose Costa Teixeira (Sep 03 2019 at 20:31):

http://blog.zeora.net/mma/examplescenario-mma1-scenario.html#resources

Jose Costa Teixeira (Sep 03 2019 at 20:32):

this seems to do that

Jose Costa Teixeira (Sep 03 2019 at 20:34):

@Eric Haas is that it?

Grahame Grieve (Sep 03 2019 at 20:42):

I don't recall granting written permission for the use of the FHIR icon there?

Lloyd McKenzie (Sep 03 2019 at 20:43):

Chrome doesn't seem to follow links to the tabs

Jose Costa Teixeira (Sep 03 2019 at 20:46):

@Grahame Grieve you are right. I just had an example as "work in progress while we don't decide what to do with exampleScenario" and at the time I copy pasted the headers. Will remove the logo.

Jose Costa Teixeira (Sep 03 2019 at 20:49):

@Grahame Grieve Done, logos removed.

Jose Costa Teixeira (Sep 03 2019 at 20:51):

anyway, this should work for that purpose:

Jose Costa Teixeira (Sep 03 2019 at 20:51):

$(window).load(function(){
$("[data-tab]").on('click', function() {
    var tab = $(this).attr('data-tab'),
        target = $(this).attr('href');
    $('ul.nav a[href="' + tab + '"]').tab('show');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 10);
});
    hash = window.location.hash;
    elements = $('a[href="' + hash + '"]');
    if (elements.length === 0) {
        $("ul.nav-tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab-content:first").show(); //Show first tab content
    } else {
        elements.addClass("active").show();
        elements.click();
    var tab = $(this).attr('data-tab'),
        target = elements.attr('href');
    $('ul.nav a[href="' + tab + '"]').tab('show');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 10);
    }
    });

Jose Costa Teixeira (Sep 03 2019 at 20:51):

don't ask how it works though.. :)

Jose Costa Teixeira (Sep 03 2019 at 21:00):

Chrome doesn't seem to follow links to the tabs

@Lloyd McKenzie are you saying it doesn't work? it works on my chrome. CTRL+F5 perhaps ?

Lloyd McKenzie (Sep 03 2019 at 21:09):

Ctrl-F5 does it. So the first link will take you to the desired tab, but subsequent links won't move you around.

Eric Haas (Sep 04 2019 at 01:40):

Thanks that does what I want and similar to what I tried. (I didn't understand it either) I will play with it to get it working in my templates

Jose Costa Teixeira (Oct 14 2019 at 11:43):

Any plans to put this in the template? I could do so myself, but best @Lloyd McKenzie or @Eric Haas decide.
Also @Oliver Egger IIRC you had something similar that actually retains the tab across pages - so that if you are in snapshot and go to another page, you end upin snapshot also.

Lloyd McKenzie (Oct 14 2019 at 14:13):

If we find an approach that works consistently, we could.

Jose Costa Teixeira (Oct 14 2019 at 14:56):

You mean something like this?

When opening a new page:

1. if the use adds #tabname to the url, go to that tab
   (possible values for tabname would differ depending on the type of page , which I think is ok)

2. If no tab name given, try to use the session variable if it exists

3. Else just go to first tab....

Depends on:

0. when moving to a new tab, store the current tab name in a session variable

Lloyd McKenzie (Oct 14 2019 at 15:07):

I'd like it to work when moving within the page too if that's possible.

Jose Costa Teixeira (Oct 14 2019 at 15:13):

what do you mean moving within the page?

Lloyd McKenzie (Oct 14 2019 at 15:14):

E.g. if you have a link to one of the tabs within the page, you'll switch to that tab

Jose Costa Teixeira (Oct 14 2019 at 15:21):

yes, that would be good. I can't javascript that...

Last updated: Apr 12 2022 at 19:14 UTC