Widget Extensions / CustomEditor / Incomplete Documentation / NO HELP, YET!
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
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?