Widget Extensions / CustomEditor / Incomplete Documentation / NO HELP, YET!

atondorf — Tue, 17 Sep 2024 12:05:30 GMT

There are several posts regarding this issue, but all of them lead to nothing, yet.

Custom Widget - How to create Custom Dialog for cu... - PTC Community

Mashup Widget Custom Dialog API - PTC Community

Article - CS276506 - Documentation/detail missing on Mashup Widget Custom Dialog API refered to in the Widget API for developing custom ThingWorx Extensions (ptc.com)

So I will retry!

Current Documentation of CustomWidgets is:

Creating Customized ThingWorx Widgets (ptc.com) - for classic approach using pure JS
Development Guidelines - ThingWorx Web Component SDK - Lit (ptc.com) - for LIT

Neither of them explain, how the Property "customEditor" of the *.ide.js can be used to show a dialog,

or better what the API of this Dialog Class should look like! So the documentation is still incomplete.

Even this great repos: jmccuen/ThingworxWidgetAPI (github.com) leavees us alone.

customEditor - name of the custom editor dialog to use for entering/editing the widget’s configuration. If you put xxx, the system presumes you have created TW.IDE.Dialogs.xxx that conforms to the Mashup Widget Custom Dialog API (described in a separate document).

So my current status is this:

widget1.ide:

TW.IDE.Widgets.widget1 = function () {
    this.widgetProperties = function () {
    return {
        name: 'Widget1',
        description: '',
        category: ['Common'],
        customEditor: "widget1CustomEditor",
        customEditorMenuText: "Configure Widget",
....

widget1.customdialog.ide.js:

TW.IDE.Dialogs.widget1CustomEditor = function () {
    this.title = "Edit Source";
    this.renderDialogHtml = function (widgetObj) {
        console.log("Rendering Dialog");
        return `<div class="configure-widget-content">
                        <h1>Widget Config</h1>
                        <textarea id="widgetSrcEditor"></textarea>
                    </div>`;
    };

    this.afterRender = function (domElementId) {

    };
};

This is working and gives me the Dialog:

With this html-tree:

<ux-dialog class="custom-editor-dialog ui-dialog au-target" au-target-id="1501">
<!--view-->
<ux-dialog-header class="modal-header au-target" au-target-id="1502">
<button type="button" class="dialog-close au-target" aria-label="Close" click.trigger="controller.cancel()" au-target-id="291">
<span aria-hidden="true">×</span>
</button>
<!--anchor-->
<div class="dialog-header-content">
<h4>Configure Widget: widget (Widget1)</h4>
<!--slot-->
</div>
</ux-dialog-header>
<ux-dialog-body class="modal-body au-target" au-target-id="1504" style="max-height: 1292px; max-width: 2032px;">
<!--view-->
<div id="configure-bindings-dialog" class="custom-editor-content">
<div id="configure-bindings-dialog-tabs">
<div id="configure-bindings-dialog-custom">
<div id="configure-bindings-dialog-custom-contents" innerhtml.bind="_editorHtml" class="au-target" au-target-id="1505">
<div class="configure-widget-content">
<h1>Widget Config</h1>
<textarea id="widgetSrcEditor"/>
</div>
</div>
</div>
</div>
</div>
<!--slot-->
</ux-dialog-body>
<ux-dialog-footer class="modal-footer au-target" au-target-id="1506">
<button disabled.bind="!model.isValid" class="btn btn-success au-target" click.trigger="done()" au-target-id="1507">
Done
</button>
<button class="btn btn-secondary au-target" click.trigger="cancel()" au-target-id="1509">
Cancel
</button>
<!--slot-->
<!--anchor-->
</ux-dialog-footer>
<!--slot-->
</ux-dialog>

But now to the question:

So there is a <ux-dialog-header>, <ux-dialog-body> and <ux-dialog-footer>.
Why 4 additional div-layers between <ux-dialog-body> and my html?
Are Tabs possible
How can I control the header and footer, e.g. no Buttons here ...
How can I interact with the Widget?
How can I use thingworx's aurelia components here? e.g. the codeEditor?
Why does this simple sample provide me this tree?

So there are predefined Tabs in the CustomDialog? How to use them?

Re: Widget Extensions / CustomEditor / Incomplete Documentation / NO HELP, YET!

Catalina — Mon, 23 Sep 2024 09:46:54 GMT

Hi @atondorf,

I wanted to see if you got the help you needed.

If so, please mark the appropriate reply as the Accepted Solution or please feel free to detail in a reply what has helped you and mark it as the Accepted Solution. It will help other members who may have the same question.
Please note that industry experts also review the replies and may eventually accept one of them as solution on your behalf.

Of course, if you have more to share on your issue, please pursue the conversation.

Thanks,

Re: Widget Extensions / CustomEditor / Incomplete Documentation / NO HELP, YET!

atondorf — Mon, 23 Sep 2024 09:55:09 GMT

Hi @Catalina,

sorry to say, but the answer on my question was: "That is "internal API" and there will be no further support or documentation".
I got consolation but no acceptable solution, yet.

Greetings

Andreas

topic Re: Widget Extensions / CustomEditor / Incomplete Documentation / NO HELP, YET! in ThingWorx Developers

Widget Extensions / CustomEditor / Incomplete Documentation / NO HELP, YET!

Re: Widget Extensions / CustomEditor / Incomplete Documentation / NO HELP, YET!

Re: Widget Extensions / CustomEditor / Incomplete Documentation / NO HELP, YET!

Re: Widget Extensions / CustomEditor / Incomplete Documentation / NO HELP, YET!