0

I am trying to make a select/dropdown option to select an available camera. I tried multiple ways I found in different solutions. Our company is using JS views, which makes it harder to find fitting solutions. Therefor, I hope this can help me out.

Code for getting available cameras, making a new array of object with only cameras using key and text to prepare for the select:

{
  // ...
  getCameras: function() {
    var camList = [];
    navigator.mediaDevices.enumerateDevices().then(function(inputs) {
      inputs.forEach(function(input) {
        if (input.kind === "videoinput") {
          var camera = {
            key: input.deviceId,
            text: input.label
          }
          camList.push(camera);
        }
      });
    });
    return camList;
  },
}

When im turning on the camera option I run this function:

{
  // ...
  setCameraSelect: function() {
    var oController = sap.ui.getCore().byId('Row').getController();
    var cameraModel = new sap.ui.model.json.JSONModel();
    cameraModel.setData({ cameras: oController.getCameras() });
    sap.ui.getCore().setModel(cameraModel, 'cameramodel');
    cameraModel.refresh();
  },
}

So far the model is loaded into the Core as cameramodel. Which I can also get back using:

var model = sap.ui.getCore().getModel("cameramodel");
console.log(model.oData);

Result: cameras: (2) [{…}, {…}]

In my view (JS), I got the following element:

var cameraSelect = new sap.m.Select("CameraSelect", {
  items: {
    path: "cameramodel>/cameras",
    template:  new sap.ui.core.ListItem({
      key: "{cameramodel>key}",
      text: "{cameramodel>text}"
    })
  },
});

I tried diffwrent versions of this, with and without the model name. Also tried to add the model to the element (sap.m.Select) itself and use it, with and without naming it. But whatever I try the select, menu doesn't give any options. What am I overseeing so badly?

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
DerDee
  • 392
  • 2
  • 10
  • In the above code I bind the model to the core, after the select item doesn't find the model by itself it starts looking there. But I didn't want to discard it without trying. So tried again every way, but no change after adding: var cameraSelect = sap.ui.getCore().byId('CameraSelect'); cameraSelect.setModel(cameraModel); cameraSelect.setModel(cameraModel, "cameramodel"); – DerDee Apr 14 '21 at 17:01
  • This was based on the following answer: https://stackoverflow.com/questions/53284500/how-to-bind-sap-ui-core-model-into-a-select-list – DerDee Apr 14 '21 at 17:09
  • Does this answer your question? [Control with bound property doesn't display model data in the UI](https://stackoverflow.com/questions/46894283/control-with-bound-property-doesnt-display-model-data-in-the-ui) – Boghyon Hoffmann May 01 '21 at 09:12
  • Is your app using a Component? As mentioned in the [linked answer above](https://stackoverflow.com/questions/67095367/programming-a-sap-m-select#comment119035233_67095367), if the views are descendants of the Component, models set on the core won't be propagated to the view. – Boghyon Hoffmann May 01 '21 at 09:32
  • Slightly off-topic: JSView is deprecated since UI5 v1.90. The API reference recommends using [Typed Views](https://openui5.hana.ondemand.com/topic/e6bb33d076dc4f23be50c082c271b9f0) instead. – Boghyon Hoffmann May 01 '21 at 09:35
  • Does your `index.html` have `data-sap-ui-compatversion="edge"` and/or `data-sap-ui-bindingsyntax="complex"`? – Boghyon Hoffmann May 01 '21 at 09:44

1 Answers1

1

View:

<Select id="selectCamera" forceSelection="false" items="{cameraModel>/}">
    <items>
       <core:Item key="{cameraModel>deviceId}" text="{cameraModel>label}"/>
    </items>
</Select>

Controller:

navigator.mediaDevices.enumerateDevices().then(function(aInputs) {
  var oCameraModel = new sap.ui.model.json.JSONModel();
  var aItems = [];
  var oSelectCamera = this.getView().byId("selectCamera");

  aInputs.forEach(function(oInput) {
    if (oInput.kind === "videoinput") {
      aItems.push(oInput);
    }
  });
  oCameraModel.setProperty("/", aItems);
  oSelectCamera.setModel(oCameraModel, "cameraModel"); //Bind model to select
}.bind(this));
alexP
  • 3,672
  • 7
  • 27
  • 36
  • First and farmost, thanks for taking the time to help out. Unfortunately there are a few problems with the solutions. As mentions we are using JS views, not the XML kind. Second the functions have been mashed up to a single one, for example purpose fine, yet it doesn't show in any way what the problem was. The problem was in getCameras function, due to the async behavior which wasnt adopted by its caller. By making the function async and use of await statements and .then() when calling getCamera the rest of the code works. – DerDee Apr 15 '21 at 17:26