pdf viewer with dynamic ids


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:

  • 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?

  • edited September 24

    Hello @bikerboy ,
    According to our tests, it works as expected. Please, refer to this snippet:
    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 : https://snippet.webix.com/k7kaa21c

  • edited September 25

    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:https://snippet.webix.com/w9qeayuk
    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:
    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. :)

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!