pdf viewer with dynamic ids

Hi

we have a problem. I cannot have a static id for my pdfview and pdfbar combo. In my init of the view i define the toolbar property in my pdfview, but this does not help. Do i have to bind the pdfbar and pdfview ?

Hello @bikerboy,

As a solution, you can use the following technique:

      on: {
        onAfterLoad: function() {
          const toolbar = this.getParentView().queryView("pdfbar");
          this.define({toolbar: toolbar.config.id});
        }
      }

Please take a look at the next snippet:
https://snippet.webix.com/1i58aa0k

I tried that see the JSON … I tied them together in the INIT event of the view

pdfview : {
“scale”: “auto”,
“width”: 0,
“height”: 0,
“gravity”: 1,
“view”: “pdfviewer”,
“syna_id”: “pdf”,
“toolbar”: “$pdfbar1”,
“minHeight”: 400,
“_inner”: {
“top”: false,
“left”: false,
“right”: false,
“bottom”: false
},
“id”: “$pdfviewer1”
}
serviceberichte.js:106 toolbar : {
“datatype”: “json”,
“_inner”: {
“top”: false,
“left”: false,
“right”: false,
“bottom”: false
},
“type”: “toolbar”,
“width”: 0,
“height”: 0,
“gravity”: 1,
“view”: “pdfbar”,
“syna_id”: “sb_pdf_toolbar”,
“id”: “$pdfbar1”,
“cols”: true
}
pdf.worker.min.js:133 The provided value

can you or your team provide any further support?

Hello @bikerboy ,
According to our tests, it works as expected. Please, refer to this snippet:
https://snippet.webix.com/1w7mj1xz
Without the details regarding the issue, unfortunately, I can’t be certain that the problem will be resolved.
In order to investigate the issue further, I would ask you to provide a code sample (via our snippet tool) which will represent the mentioned issues.

Hi,

here is the snippet you requested : Code Snippet

Hello @bikerboy ,
In the example that you attached the problem is that the toolbar set directly on the component’s init.
Please refer to the following example:Code Snippet
Also it is probably better to not use the onPageRender to define toolbar, because of the redifine will be triggered on every page.

Thank you… there is a little challenge left in your example.

The totalpage count is not set, also the zoomlevel is not shown. All works that is fine, but maybe you can fix that also

@bikerboy ,
Please check the updated example above.

I got it…

        // build UI by code : 
        $$("pdfcontainer").addView({ view: "pdfbar", syna_id: "sb_pdf_toolbar" })
        let t_id = syn$$("sb_pdf_toolbar").config.id. // syn$$ does a queryView()
        $$("pdfcontainer").addView({ view: "pdfviewer", syna_id: "pdf", toolbar: "sb_pdf_toolbar", toolbar : t_id })

Hello @bikerboy ,
Please note that, when you add the pdfviewer you need to specify the actual pdfbar ID in the toolbar property, like next:
https://snippet.webix.com/g76cfdcl
And in your case, when you set as toolbar:" sb_pdf_toolbar " it is not the actual ID.

Hi i made a copy and paste mistake… when you scroll to the right you will see i got toolbar defined twice. :slight_smile: