UI.contextMenuPopup.update

Technical Support WebViewer
, ,
1

WebViewer Version:

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? Yes
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? YES
Is your issue related to annotations? yes

Please give a brief summary of your issue:
(Think of this as an email subject)

  1. Using the VUE front-end framework
  2. Use the UI. ContextMenuPopup. Update ([]) method;
  3. I have no problem running my code in 8.12.1 or 10.0.0
  4. When I upgraded to 10.3.0, I got an error when I right-clicked twice.
  5. The code is as follows: const renderSlider = () => {
    const div=document.getElementById(‘signatruePop’);
    div.style.position = ‘relative’;
    div.style.width = ‘250px’;
    div.style.display=‘block’;
    return div;

};
this.newSignatruePop = {
type: ‘customElement’,
render: renderSlider
};
UI.contextMenuPopup.update([
this.newSignatruePop,
]);
6. The error after F12 is TypeError: Cannot read properties of null (reading ‘style’).
7. I can’t find the dom with the id of signatruePop in the source code. There is one when I right-click it for the first time, but there is no DOM for the second time

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

  1. Using the VUE front-end framework
  2. Use the UI. ContextMenuPopup. Update ([]) method;
  3. I have no problem running my code in 8.12.1 or 10.0.0
  4. When I upgraded to 10.3.0, I got an error when I right-clicked twice.
  5. The code is as follows: const renderSlider = () => {
    const div=document.getElementById(‘signatruePop’);
    div.style.position = ‘relative’;
    div.style.width = ‘250px’;
    div.style.display=‘block’;
    return div;

};
this.newSignatruePop = {
type: ‘customElement’,
render: renderSlider
};
UI.contextMenuPopup.update([
this.newSignatruePop,
]);
6. The error after F12 is TypeError: Cannot read properties of null (reading ‘style’).
7. I can’t find the dom with the id of signatruePop in the source code. There is one when I right-click it for the first time, but there is no DOM for the second time

Please provide a link to a minimal sample where the issue is reproducible:

  1. Using the VUE front-end framework
  2. Use the UI. ContextMenuPopup. Update ([]) method;
  3. I have no problem running my code in 8.12.1 or 10.0.0
  4. When I upgraded to 10.3.0, I got an error when I right-clicked twice.
  5. The code is as follows: const renderSlider = () => {
    const div=document.getElementById(‘signatruePop’);
    div.style.position = ‘relative’;
    div.style.width = ‘250px’;
    div.style.display=‘block’;
    return div;

};
this.newSignatruePop = {
type: ‘customElement’,
render: renderSlider
};
UI.contextMenuPopup.update([
this.newSignatruePop,
]);
6. The error after F12 is TypeError: Cannot read properties of null (reading ‘style’).
7. I can’t find the dom with the id of signatruePop in the source code. There is one when I right-click it for the first time, but there is no DOM for the second time

2

Hello 1091928997,

Looking at our Custom Element guide for reference, it seems like there might be an issue with your renderSlider function. I was able to make the DOM element appear in version 10.3 using the following:

  const renderSlider = () => {
    const div = document.createElement('input');
    div.id = `signatruePop`;
    div.style.position = `relative`;
    div.style.width = `250px`;
    div.style.display= `block`;
    console.log(document.querySelector("#signatruePop"));
    return div;
  };

Best Regards,

Carlo Mendoza
Web Developer
Apryse

3

const renderCustomPanel = () => {

      return (

        <div>

          <div>

            <label htmlFor="participantDropdown">{t("Participant")}</label>

          </div>

          <div className="w-100 d-flex justify-content-center">

            <select

              style={{

                width: "100%",

                padding: "12px 5px",

                margin: "8px 0",

              }}

              onChange={handleChangeUser}

            >

              {participantsRef.current.map((userData, index) => {

                return (

                  <option value={userData.pk_UID}>{userData.name}</option>

                );

              })}

            </select>

          </div>

          <div className="w-100">

            <button

              style={{

                width: "100%",

                padding: "12px 30px",

                margin: "8px 0",

                background: "#6172d6",

                border: "none",

                color: "#fff",

                cursor: "pointer",

              }}

              onClick={openCustomModal}

            >

              {t("Add-Signaturies")}

            </button>

          </div>

          <div

            style={{

              display: "flex",

              justifyContent: "center",

              gap: "10px",

              alignItems: "center",

            }}

          >

            <button

              style={{

                width: "100%",

                padding: "5px 12px",



                background: "#ffffff",

                border: "1px solid #e1e1e1",

              }}

              onClick={handleClickTItle}

            >

              {t("Title")}

            </button>

            <button

              style={{

                width: "100%",

                padding: "5px 12px",

                background: "#ffffff",

                border: "1px solid #e1e1e1",

              }}

              onClick={handleClickName}

            >

              {t("Name")}

            </button>

            <button

              style={{

                width: "100%",

                padding: "5px 12px",



                background: "#ffffff",

                border: "1px solid #e1e1e1",

              }}

              onClick={handleClickEmail}

            >

              {t("Email")}

            </button>

          </div>

        </div>

      );

    };



    let myCustomPanel = {

      tab: {

        dataElement: "customPanelTab",

        title: "customPanelTab",

        img: "/favicon-32x32.png",

      },

      panel: {

        dataElement: "customPanel",

        render: renderCustomPanel,

      },

    };



    instance.UI.setCustomPanel(myCustomPanel);

this is my code for setCustomPanel before upgrade its working perfact now after update its not working

4

Hello huzeifa,

Please submit a new post through our support portal and one of our teams will get in touch with you regarding this separate issue. Thank you.

Regards,
Luke