HowTo create a widget that allows to input text

Apps & Services HABPanel
1

Hi, could someone point me to a explantion that allows to create a widget text inputs?

2

Bootstrap docs for forms styling, ngValue, ngModel in the Angular docs are useful here.

<div class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" no-snap-drag="true"
           ng-model="myvalue" ng-value="itemValue('Hue_Bureau')"></input>
    <button type="button" class="btn btn-primary"
           ng-click="sendCmd('Hue_Bureau', myvalue)">Update</button>
  </div>
</div>

Also note the no-snap-drag="true" from snap.js to prevent the new drawer from showing when you drag inside the text box.

3 Likes
3

@opus can you share your experience?

4

My experience?

<div class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" no-snap-drag="true"
           ng-model="myvalue" ng-value="itemValue('SayCommand')"></input>
    <button type="button" class="btn btn-primary"
           ng-click="sendCmd('SayCommand', myvalue)">Sag es!</button>
  </div>
</div>

Works! Yes it is just the code posted above. A big thanks again to @ysc.
The only point that is not working as it was intended is that in case the UI is reopened, the string, which is still shown, gets deleted whenever the control regains the focus. I would have expected the old string to stay until actively deleted.

1 Like