Change contents on sp-textfield on ux panel

Photoshop UXP Plugin API
, ,
1
  1. Why are labels are not showing up (see HTML / png)
  2. How to Change the contents of a spectrum text field on a UX panel
    Sorry, I find very little docs on the subject.

HTML

          <div style="margin-top:60px; text-align: center;">
            <sp-textfield id="customWidth" style="position:fixed; text-align: center;  margin-left:12px;"
                    width=50px height=48px size="xs" type="number" value="40" label="W:">
                 Width</sp-textfield>

            <sp-action-button  class="btn" id="exchange" style="position:fixed; text-align: center; width:36px; padding-left:7px; left:72px; margin-left:12px;" >
                  <div slot="icon" class="icon">
                  <svg id="exchange" viewBox="0 0 18 18"><title>S Sync 18 N</title>
                  <rect id="Canvas" fill="#ff13dc" opacity="0" /><path class="fill" d="M10.5,8a.5.5,0,0,0,.5-.5v-3a.5.5,0,0,0-.5-.5H5V1.8675A.3665.3665,0,0,0,4.63451,1.5h-.004a.359.359,0,0,0-.2565.108L.0945,5.508a.36751.36751,0,0,0,0,.492L4.374,10.392a.359.359,0,0,0,.2565.108A.3665.3665,0,0,0,5,10.13651V8Z" />
                  <path class="fill" d="M17.9055,12,13.626,7.608a.359.359,0,0,0-.2565-.108A.3665.3665,0,0,0,13,7.86349V10H7.5a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5H13v2.1325a.3665.3665,0,0,0,.36549.36751h.004a.359.359,0,0,0,.2565-.108l4.2795-3.9A.36751.36751,0,0,0,17.9055,12Z" />
            </svg></div></sp-action-button>

            <sp-textfield id="customHeight" style="position:fixed; text-align: center; left:130px;"
                   width=50px height=48px size="xs" type="number" value="50">
                   Height</sp-textfield>
                  <br>
          </div>

JS

document
.getElementById("exchange")
.addEventListener("click", async function () {
  await ExecuteAsModal(() => {
    // console.log("clicked exchange");
    cWidth = document.getElementById("customWidth").value;
    cHeight = document.getElementById("customHeight").value;

    console.log(`customHeight = ${cWidth}`);
    console.log(`customHeight = ${cHeight}`);

});
});

Screenshot 2022-11-11 at 21.24.36
Screenshot 2022-11-11 at 21.24.36464×104 10.6 KB

I would like a label; W:[40] // H:[50]
I would like that when I click the button, the values are exchanged.
I am having {syntax} problems with the changing the contents of the sp-textedit fields. I can get the value but don’t have the method for changing the contents.

Thanks for any examples…

2

Nevermind. The Adobe UXP Developer Tool keeps going off line every 5 secs. and wasn’t updating {Watch}

I had it all the time…

document.getElementById(“customHeight”).value = cWidth;
document.getElementById(“customWidth”).value = cHeight;

Now I just need help with the HTML; why isn’t the Label text not showing?

3

Because you don’t have any label in your HTML
https://developer.adobe.com/photoshop/uxp/2022/uxp/reference-spectrum/User%20Interface/sp-textfield/