Autodesk Forge Adding Input Element to Forge Button

Question

I would like to dynamically add an input element to a button and based on Angular Binding, bind the input to the selected object in the viewer. What I tried so far you find below. The input element is shown without any problem. However, I cannot access the generated input element, no input possible. Any suggestions to solve that?

public loadMobileToolbar() { /////////////////////// Facade /////////////////////// // @ts-ignore var button1 = new Autodesk.Viewing.UI.Button('mobile-text-button-facade'); var button2 = new Autodesk.Viewing.UI.Button('mobile-coloring'); button1.onClick = (event) => { console.log(this.input); $('#mobile-text-button-facade').attr('data-before', ''); $('#mobile-text-button-facade').html('<input style="z-index: 100000" class="custom-input" type="text" [(ngModel)]="input.facade" (change)="onChange($event)" spellcheck="false">'); }; button2.onClick = (event) => { this.showValuesOfParameter('facade'); }; button2.addClass('mobile-coloring'); // @ts-ignore button2.container.children[0].classList.add('fas', 'fa-palette'); // Button 4 Textfeld button1.addClass('mobile-text-button-facade'); // SubToolbar var controlGroupMobile = new Autodesk.Viewing.UI.ControlGroup('mobile-custom-toolbar'); // controlGroupERP.addControl(button3); controlGroupMobile.addControl(button1); controlGroupMobile.addControl(button2); this.toolbarMobile = new Autodesk.Viewing.UI.ToolBar('my-custom-view-toolbar-mobile-facade', { collapsible: false, alignVertically: false }); this.toolbarMobile.addControl(controlGroupMobile); $(this.viewerComponent.viewer.container)[0].append(this.toolbarMobile.container); $('#mobile-text-button-facade').attr('data-before', 'Facade'); }

Petr Broz · Accepted Answer · 2020-09-14 11:29:29Z

1

Adding the <input> without Angular bindings seems to be working fine:

You might need to ask around in the Angular community about the bindings.

answered Sep 14, 2020 at 11:29

Petr Broz

10.1k2 gold badges18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dabuchera Over a year ago

Thanks for the suggestion. Decided solution below

dabuchera · Accepted Answer · 2020-09-29 12:19:38Z

 var filterbox = new Autodesk.Viewing.UI.Filterbox('mobile-filterbox', { filterFunction: this.testing }); var controlGroupMobileInput = new Autodesk.Viewing.UI.ControlGroup('mobile-custom-toolbar-input'); controlGroupMobileInput.addControl(filterbox); buttonFilter.onClick = (event) => { if (!this.input.objectPath && this.viewerComponent.viewer.getSelectionCount() === 0) { $('.filter-box.docking-panel-delimiter-shadow').val(''); button1.setState(1); button7.setState(1); // tslint:disable-next-line: no-use-before-declare button3.setState(1); // tslint:disable-next-line: no-use-before-declare button9.setState(1); // tslint:disable-next-line: no-use-before-declare button5.setState(1); $('#mobile-custom-toolbar-input').hide(); this.whichInput = ''; } else if (this.viewerComponent.viewer.getSelectionCount() > 1 && this.redSelectedDbIDs.length === 0) { this.multiSelectedMobileInput.forEach(input => { if (this.whichInput === 'u' || this.whichInput === 'v') { input[this.whichInput] = Number($('.filter-box.docking-panel-delimiter-shadow').val()); } else if (this.whichInput === 'additionalParameter') { input[this.whichInput][0].value = $('.filter-box.docking-panel-delimiter-shadow').val(); } else { input[this.whichInput] = $('.filter-box.docking-panel-delimiter-shadow').val(); } }); this.api.saveMultipleInput(this.multiSelectedMobileInput).then( res => { if (res === null) { this.messageService.add({ key: 'warning', severity: 'error', summary: 'Error', detail: 'Something went wrong with SAVING' }); } else { this.api.getAllInputs(this.platform.currentProject._id).then( inputs => { this.inputs = inputs; // @ts-ignore this.messageService.add({ key: 'warning', severity: 'success', summary: 'Success', detail: res.modified + ' INPUT was UPDATED', life: 5000 }); this.viewerComponent.viewer.clearThemingColors(this.viewerComponent.viewer.model); this.editTable = false; this.unsavedChanged = false; } ); } } ); this.multiSelectedMobileInput = new Array(); this.viewerComponent.viewer.clearSelection(); $('.filter-box.docking-panel-delimiter-shadow').val(''); button1.setState(1); button7.setState(1); // tslint:disable-next-line: no-use-before-declare button3.setState(1); // tslint:disable-next-line: no-use-before-declare button9.setState(1); // tslint:disable-next-line: no-use-before-declare button5.setState(1); $('#mobile-custom-toolbar-input').hide(); this.whichInput = ''; } else if (this.redSelectedDbIDs.length !== 0) { this.redSelectedDbIDs.forEach(dbId => { this.viewerComponent.viewer.model.getProperties(dbId, (r) => { var tempInput = this.inputs.find(ele => { if (ele.objectPath.indexOf('/')) { return ele.objectPath.split('/')[ele.objectPath.split('/').length - 1] === r.name; } else { return ele.objectPath === r.name; } }); this.multiSelectedMobileInput.push(tempInput); }); }); setTimeout(() => { this.multiSelectedMobileInput.forEach(input => { if (this.whichInput === 'u' || this.whichInput === 'v') { input[this.whichInput] = Number($('.filter-box.docking-panel-delimiter-shadow').val()); } else if (this.whichInput === 'additionalParameter') { input[this.whichInput][0].value = $('.filter-box.docking-panel-delimiter-shadow').val(); } else { input[this.whichInput] = $('.filter-box.docking-panel-delimiter-shadow').val(); } }); this.api.saveMultipleInput(this.multiSelectedMobileInput).then( res => { if (res === null) { this.messageService.add({ key: 'warning', severity: 'error', summary: 'Error', detail: 'Something went wrong with SAVING' }); } else { this.api.getAllInputs(this.platform.currentProject._id).then( inputs => { this.inputs = inputs; // @ts-ignore this.messageService.add({ key: 'warning', severity: 'success', summary: 'Success', detail: res.modified + ' INPUT was UPDATED', life: 5000 }); this.viewerComponent.viewer.clearThemingColors(this.viewerComponent.viewer.model); this.editTable = false; this.unsavedChanged = false; } ); } } );

Collectives™ on Stack Overflow

Autodesk Forge Adding Input Element to Forge Button

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related