Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
RSvebeck
Specialist
Specialist

Two extension (same) objects on the same tab - not possible?

It seems like I can not have the same extension object more than once on the same sheet. Is that correct? is it a known limitation? -> If I place it twice, only on of them work (shows correct information), the other one remains "blank". Version 11.

//Robert

Svebeck Consulting AB
1 Solution

Accepted Solutions
ErikWetterberg

Sorry, my first post was a bit unclear. Here is an attempt to show what I mean. You will need to hange the DrawCanvas() and RedrawCanvas methods. Also, you probably should not call ClearSelections() in the rendering code. You might have a button to do that, but not as part of then rendering.

When you create your Raphael object, the container can be an id OR a DOM element.

(http://raphaeljs.com/reference.html#Raphael) By using a DOM element we avoid the id problem altogether.

Here is my attempt. Not tested of course...(I am pretty sure it wont work as it is)

function init() {

    Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Postnummerkarta/raphael.js", function () {

        Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Postnummerkarta/canvas.js",

        setup);

    });

}

function setup() {

    Qva.AddExtension("Postnummerkarta", function () {

        if (!this.Canvas) {

            // don't know what this is used for, should not be global

            this.OriginalPaths = myData.Rows.length;

            var ui = document.createElement("div");

            this.Element.appendChild(ui);

            this.Canvas = Raphael(ui, this.GetWidth(), this.GetHeight());

           

            var Paths = new Array();

            var DefaultFill = "#FAFAFA";

            var BaseHue = this.Layout.Text0.text;

            var HueSpan = this.Layout.Text1.text;

            var Scale = this.Layout.Text2.text;

            CreateColors(BaseHue, HueSpan, Scale, DefaultFill);

            DrawCanvas(this.Canvas, this.Data);

        }else {

            //to redraw you need the new version of Data

            ReDrawCanvas(this.Canvas, this.Data);

        };

    });

};

init();

Erik

View solution in original post

26 Replies
ErikWetterberg

No, it should be possible to use the same extension several times. There might be a problem with your javascript code. Does it use any global objects?? Will the second instance overwrite anything the first instance needs??

Erik

Brian_Munz
Employee
Employee

Do you at some point give the div of the extension's content an ID? This will usually cause a conflict because there are two divs with the same so the code gets confused which div to fulfill.

RSvebeck
Specialist
Specialist
Author

Hi.

I do use several global variables. So you mean I have to rewrite the code so that no global variables are used?

Here is a piece of my code:

var Canvas;
Paths = new Array();
var DefaultFill = "#FAFAFA";

function init() {
Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Postnummerkarta/raphael.js", function () {
Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Postnummerkarta/canvas.js", setup);
});
}

function setup() {
Qva.AddExtension("Postnummerkarta", function () {
if (!document.getElementById("holder")) {
myData = this.Data;
myData.ClearSelections();
OriginalPaths = myData.Rows.length;

this.Element.innerHTML = "<div id=\"holder\"></div>";
Canvas = Raphael("holder", this.GetWidth(), this.GetHeight());

BaseHue = this.Layout.Text0.text;
HueSpan = this.Layout.Text1.text;
Scale = this.Layout.Text2.text;
CreateColors();

DrawCanvas();
}
else {
ReDrawCanvas();

};
});
};


init();

// BRG Robert

Svebeck Consulting AB
RSvebeck
Specialist
Specialist
Author

Yes! I do give my div part an ID, but how can I avoid giving it an ID? Or do I have to generate an unique ID in the code somehow? I just learned JScript a few months ago so I am not so skilled...  //Robert

Svebeck Consulting AB
ErikWetterberg

Some suggestions:

- don't use a global var Canvas but a local one in your function or possibly this.Canvas. Probably you will need to send this object to your DrawCanvas and RedrawCanvas methods

- Raphael can be initialized with a DOM element, so use that instead of an id

Erik

RSvebeck
Specialist
Specialist
Author

Hi.


Hmmm....

I'm not very skilled in jscript (yet..) to understand what I need to do, or how to do it ...  but I will have a look at the Stream Chart extension example which uses Rahpael and take it from there. "Learning by doing"... 🙂

Thanks for the suggestions,

Robert

Svebeck Consulting AB
Alexander_Thor
Employee
Employee

So when you are adding in your second version of the extension to the app, if you have non-unique ids for a div or canvas element qlikview dosen't now know which div you are trying to interact with.

Dont:

this.Element.innerHTML = '<div id="canvas"></div>';

Do:

var r=Math.floor(Math.random()*10001);

this.Element.innerHTML = '<div id="canvas' + r + '"></div>';

The variable r will be unique, hopefully , between several different versions of the same extension.

Brian_Munz
Employee
Employee

I agree with Alexander.  I do something similar, but I key off of the object ID.

var divName = this.Layout.ObjectId.replace("\\", "_");

var ui = document.createElement("div");

ui.setAttribute("id", divName);

this.Element.appendChild(ui);

Either way works, I've done both methods.

ErikWetterberg

Sorry, my first post was a bit unclear. Here is an attempt to show what I mean. You will need to hange the DrawCanvas() and RedrawCanvas methods. Also, you probably should not call ClearSelections() in the rendering code. You might have a button to do that, but not as part of then rendering.

When you create your Raphael object, the container can be an id OR a DOM element.

(http://raphaeljs.com/reference.html#Raphael) By using a DOM element we avoid the id problem altogether.

Here is my attempt. Not tested of course...(I am pretty sure it wont work as it is)

function init() {

    Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Postnummerkarta/raphael.js", function () {

        Qva.LoadScript("/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/Postnummerkarta/canvas.js",

        setup);

    });

}

function setup() {

    Qva.AddExtension("Postnummerkarta", function () {

        if (!this.Canvas) {

            // don't know what this is used for, should not be global

            this.OriginalPaths = myData.Rows.length;

            var ui = document.createElement("div");

            this.Element.appendChild(ui);

            this.Canvas = Raphael(ui, this.GetWidth(), this.GetHeight());

           

            var Paths = new Array();

            var DefaultFill = "#FAFAFA";

            var BaseHue = this.Layout.Text0.text;

            var HueSpan = this.Layout.Text1.text;

            var Scale = this.Layout.Text2.text;

            CreateColors(BaseHue, HueSpan, Scale, DefaultFill);

            DrawCanvas(this.Canvas, this.Data);

        }else {

            //to redraw you need the new version of Data

            ReDrawCanvas(this.Canvas, this.Data);

        };

    });

};

init();

Erik