# How to create pop out screen for control in 3D format?

**URL:** <https://forum.wise-paas.advantech.com/t/how-to-create-pop-out-screen-for-control-in-3d-format/684>\
**Category:** SaaSComposer\
**Created:** [July 12, 2024, 7:21am UTC](https://forum.wise-paas.advantech.com/t/how-to-create-pop-out-screen-for-control-in-3d-format/684 "2024-07-12T07:21:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chien\_Wei\_Hiew](https://avatars.discourse-cdn.com/v4/letter/c/a9adbd/32.png) [@Chien\_Wei\_Hiew](https://forum.wise-paas.advantech.com/u/Chien_Wei_Hiew)\
**Post date:** [July 12, 2024, 7:21am UTC](https://forum.wise-paas.advantech.com/t/how-to-create-pop-out-screen-for-control-in-3d-format/684/1 "2024-07-12T07:21:02Z")

</div>

Hi may i know how to create a pop out screen for each of my equipment control in 3D format

 ![Control screen pop out](https://canada1.discourse-cdn.com/flex032/uploads/wisepaasforum/original/1X/728e92bea804a6861af900a60a2dcb000569c1d8.png)

---

<div class="post-metadata">

**Author:** ![Ken\_Yek](https://avatars.discourse-cdn.com/v4/letter/k/87869e/32.png) [@Ken\_Yek](https://forum.wise-paas.advantech.com/u/Ken_Yek)\
**Post date:** [July 15, 2024, 6:39am UTC](https://forum.wise-paas.advantech.com/t/how-to-create-pop-out-screen-for-control-in-3d-format/684/2 "2024-07-15T06:39:39Z")

</div>

You can use general javascript create a html dialog or use the library in SaaS Composer.

If you use ht library  
In open scene:

```
dialog = new ht.widget.Dialog();

```

Select an object, choose “control” in the properties on the right, check “interactive,” and then add a click event to the object.

```
dialog.setConfig({
  title: "Prompt",
  titleAlign: "left",
  closable: true,
  draggable: true,
  contentPadding: 20,
  content: `<div id="dialogArea" style="width:500px;height:500px;"></div>`,
  buttons: [{
    label: "Cancel"
  }, {
    label: "Yes"
  }],
  buttonsAlign: "right",
  action: function (item, e) {
    var alertDialog = new ht.widget.Dialog({
        title: "Alert",
        contentPadding: 20,
        content: "<p>You clicked '" + item.label + "'</p>",
        buttons: [{
            label: "OK"
        }],
        action: function () {
            alertDialog.hide();
        }
    });
    alertDialog.show();
    dialog.hide();
  }
});
dialog.show();

if (window.location.href.indexOf('sceneAndDisplay.html') !== -1) {
  var obj = {
    fileName: 'displays/builtIn/wastewater treatment/wastewater treatment.json',
    gvType: 'displays'
  }
  if (typeof commonViewUtil != 'undefined') {
    var exist = false;
    for (var i = 0; i < commonViewUtil.currentFiles.length; i++) {
        if (commonViewUtil.currentFiles[i]['fileName'] == obj['fileName']) {
            document.getElementById('dialogArea').innerHTML = "";
            commonViewUtil.currentFiles[i]['graphView'].addToDOM(document.getElementById('dialogArea'));
            exist = true;
        }
    }
    if (!exist) {
        commonViewUtil.appendDisplayToDOM(obj, { 'parentViewId': 'dialogArea' })
    }
  }
} else {
  document.getElementById('dialogArea').innerHTML = "<span>Not in Layer page</span>";
}

```

You can download the example in  
[pop up dialog](https://kenyek.github.io/SaaS-Composer-minisite/index.html#e_overlay_03)

---

<div class="post-metadata">

**Author:** ![Chien\_Wei\_Hiew](https://avatars.discourse-cdn.com/v4/letter/c/a9adbd/32.png) [@Chien\_Wei\_Hiew](https://forum.wise-paas.advantech.com/u/Chien_Wei_Hiew)\
**Post date:** [October 21, 2024, 4:22am UTC](https://forum.wise-paas.advantech.com/t/how-to-create-pop-out-screen-for-control-in-3d-format/684/3 "2024-10-21T04:22:26Z")

</div>

对不起我想再请问有没有那里的coding 是需要更正的如果我的 display 比如说是想要display 这个

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/wisepaasforum/original/1X/9a89be629fd2909d5a6284ec14469b72089cd27d.png)