What does this means " [] " in developer console ? and my panel doesn't show up!

Adobe XD UXP Plugin API
,
1

I did my basic plugin code and If i select my plugin in XD it doesn’t show the panel UI and in developer console I see this " " . What am I missing ?

Here is my code :

const {
    Text,
    Color
} = require("scenegraph");
const fs = require("uxp").storage.localFileSystem;
async function bgImage() {
    const {
        selection
    } = require(“scenegraph”);
    const bgImg = await fs.getFileForOpening({
        allowMultiple: true,
        types: fileTypes.images
    });
    if (bgImg.length === 0) {
        console.log(“please select an image”)
    }
    selection.insertionParent.addChild(bgImg);
    bgImg.placeInParentCoordinates({
        x: 0,
        y: 0
    }, selection.insertionParent.localCenterPoint);
    return bgImg;
}
async function fgImage() {
    const {
        selection
    } = require(“scenegraph”);
    const fgImg = await fs.getFileForOpening({
        allowMultiple: true,
        types: fileTypes.images
    });
    if (fgImg.length === 0) {
        console.log(“please select an image”)
    }
    selection.insertionParent.addChild(fgImg);
    fgImg.placeInParentCoordinates({
        x: 0,
        y: 0
    }, selection.insertionParent.localCenterPoint);
    return fgImg;
}
async function createText(text, {
    color = “blue”
} = {}) {
    const {
        selection
    } = require(“scenegraph”);
    const newText = new Text();
    newText.text = text;
    newText.fill = new Color(color);
    selection.insertionParent.addChild(newText);
    newText.placeInParentCoordinates({
        x: 0,
        y: 0
    }, selection.insertionParent.localCenterPoint);
    return newText;
}
let panel;

function create() {
    const HTML = < style > #title {
        font - size: 14 px;
        font - weight: Bold;
    }.break {
        flex - wrap: wrap;
    }
    label.row > * {
        margin: auto;margin - bottom: 10 px;
    }
    label.row > span {
        color: #8E8E8E; width: auto; text-align: left; font-size: 9px; } label.row input { flex: 1 1 auto; } label.row input[type= number] {
        flex - basis: 32 px;
    }
    label.row input[type = text] {
        flex - basis: 32 px;
    }
    div input[type = checkbox] {
        flex: 0 0 20 px;
    }
    form footer > * {
        position: relative;left: 8 px;
    } < /style> <form method="dialog" id="main"> <label class="row" id="title"> <span font-size="20px">Quick Parallax</span > < /label> </br > < div class = "row break" > < label class = "row"
    id = "bg" > < span > Select Background < /span> <button id="bg-b" type="submit" uxp-variant="cta">Select</button > < /label> </br > < div class = "row break" > < label class = "row"
    id = "fg" > < span > Select Foreground < /span> <button id="fg-b" type="submit" uxp-variant="cta">Select</button > < /label> </br > < div class = "row break" > < label class = "row"
    id = "txt" > < span > Foreground Text < /span> <input type="text" uxp-quiet="true" id="txt_bx" value="" placeholder=""/ > < /label> </br > < /div> </div > < footer > < button id = "ok"
    type = "submit"
    uxp - variant = "cta" > Create < /button> <button id="cancel" type="submit" uxp-variant="cta" background-color:"#E54C4C" >Cancel</button > < /footer> </form > ;
    panel = document.createElement(“div”);
    panel.innerHTML = HTML;
    panel.querySelector("#bg-b").addEventListener(bgImage);
    panel.querySelector("#fg-b").addEventListener(fgImage);
    panel.querySelector(“ok”).addEventListener(createText);
    return panel;
}

function show(event) {
    // create panel the first time it’s shown
    if (!panel) {
        panel = create();
        event.node.appendChild(panel);
    }
}

function hide(event) {
    // in this example, we don’t need to do anything when XD hides our panel
}

function update(selection, root) {
    console.log(selection.items);
}
module.exports = {
    panels: {
        Name: {
            show,
            hide,
            update
        }
    }
};
2

Just for future reference (I’ve done that for you here :slightly_smiling_face:):

Please don’t use

>some code

but

```js
some code
```

(and some indention) to make the code readable. Otherwise, it takes a lot more effort to answer your question, meaning it’s less likely to get quick answers.

Regarding your question

[] is an empty array. The only place where this could get printed to the console in your code is the console.log(selection.items); statement in your update() function.

This means that you’ve most likely got nothing selected when this gets called (e.g., as you’ve deselected everything, invoking the call).

On first glance, I can’t see any obvious errors in your code, which is why we’ll have to dig into this a bit further.

First of all: Is Name (including the capital letter) the panel name you’ve specified in your manifest.json?

3 Likes
3

Thanks for that. I’ll use ‘’'js

No I did that “Name” thing to hide my current plugin name that I am working with. My manifest.json is perfect!