Community Tip - You can Bookmark boards, posts or articles that you'd like to access again easily! X
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:
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 are predefined Tabs in the CustomDialog? How to use them?
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,
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