topic Re: Web Appbuilder - How to display additional info on scene? custom widget? in Web AppBuilder Custom Widgets Questions

Web Appbuilder - How to display additional info on scene? custom widget?

MichaelLev — Thu, 09 Jul 2020 09:25:44 GMT

I use Launchpad Theme, and need to display label showing when the 3D scene data has been created, on scene view,

just leftside to top-right 3 on-screen widgets, like: "Date of photo: 9.7.2020".

This is fixed text string to be taken from json config.

The need is very very simple, yet... I don't know how to do it. Since I don't need the whole widget functionality, Only automatically show some fixed text from when the application starts.

I think the right way is to create a custom widget, that like Coordinate widget will display text on screen, but -

1. Coordinate is a huge widget and I need to dig in it and create a very tiny one.

2. Coordinate does indeed display a tiny icon on its left, whilst I prefer (if possible) to present only the text (if icon must be displayed besides the text [I prefer leftside of it], but clicking it would do nothing, it is also ok). Still, I don't know how Coordinate hides the original widget icon. Maybe this suits me.

The needed tiny custom widget would not be activated manually, but all it will do is display the fixed text of e.g. maximum 25 characters near top-right of screen, with some nice background color.

Or maybe the easy way is to modify the code that manages the screen, so that besides putting all widgets on it, it will also put some label (with some background)?

I'm not so strong with css. I need help and will appreciate it very much.

Re: Web Appbuilder - How to display additional info on scene? custom widget?

MichaelLev — Thu, 09 Jul 2020 12:32:33 GMT

Meantime I'm succeeding in adapting Coordinate. I'll see if I have questions after I finish.

Thank you.

Re: Web Appbuilder - How to display additional info on scene? custom widget?

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:13:04 GMT

Michael,

If you don't want to create a widget then the jimu.js/MapManager.js is the right place for this code. Lines 26-30 added to the _show3DWebScene function.

      _show3DWebScene: function(appConfig) {
        var portalUrl = appConfig.map.portalUrl;
        var itemId = appConfig.map.itemId;
        this._destroySceneView();
        var def = WebSceneLoader.createMap(this.mapDivId, portalUrl, itemId);

        def.then(lang.hitch(this, function(sceneView){
          // this._publishMapEvent(map);
          this._publishSceneViewEvent(sceneView);
          if(appConfig.map.mapOptions){
            var initialState = appConfig.map.mapOptions.initialState;
            if(initialState && initialState.viewpoint){
              try{
                var vp = Viewpoint.fromJSON(initialState.viewpoint);
                if(vp){
                  this.sceneView.map.initialViewProperties.viewpoint = vp;
                  this.sceneView.viewpoint = vp.clone();
                }
              }catch(e){
                console.error(e);
              }
            } else {
              this.sceneView.map.initialViewProperties.viewpoint = this.sceneView.viewpoint;
            }

            var photoDateDiv = html.create("div", {innerHTML: "Blah Blah", "class": "jimu-widget", style: {
              color: "white", "background-color": "rgba(0,0,0,0.80)", left: "auto", top: "54px", right: "50px", 
              bottom: "auto", width: "auto", height: "auto", padding: "0 4px", margin: "auto", "z-index": "auto", 
              position: "absolute", "line-height": "17px"
            }}, document.getElementsByClassName("esri-view-root")[0]);
          }
        }), lang.hitch(this, function(){
          if (this.loading) {
            this.loading.destroy();
          }
          topic.publish('mapCreatedFailed');
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Web Appbuilder - How to display additional info on scene? custom widget?

MichaelLev — Thu, 09 Jul 2020 18:20:32 GMT

Dear Robert, thank you very much for answering quickly.

It took me time to finish OK by custom widget (I started from Coordinate and deleted most text) an it's fully OK. Tomorrow I'll check what you sent in order to learn the 2nd way, and I'll let you know.

Re: Web Appbuilder - How to display additional info on scene? custom widget?

MichaelLev — Fri, 10 Jul 2020 11:08:32 GMT

Dear Robert,

My way of independent widget works very well (I took Coordinate widget and "cleaned" almost whole of it).

Today I tested your VERY short implementation and it works like magic!

Two questions:

1. In order to be able use it, I have to handle locales for the text entered by config. I see that by nls I can handle different languages,

but how can I set that the application will handle it as it handles other widgets, e.g. move it to leftside of screen when locale changed to rtl languages (e.g. &locale=he) ?

2. I looked and saw that it is entered not directly inside the div with class "esri-view-root", but inside its child, the div with class "esri-ui". Why it has not been put directly beneath "esri-view-root"?

3. Anyway, I tried to put it inside "esri-view", but it had not solved the problem in 1. So, what is the right way to let esri code handle it as it handles the other qidgets? I mean to move it between screen right and screen left as the language changes from ltr to rtl?

Re: Web Appbuilder - How to display additional info on scene? custom widget?

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:13:07 GMT

Michael,

1. So in that case a separate widget might be a better option then. But if you wanted to continue to do this in the MapManager.js you would get the localized text using code like this, window.jimuNls.mylocalizedString. Where mylocalizedString is put in the jimu.js\nls\main.js for english and jimu.js\nls\he\main.js for Hebrew. As far as rtl this should be done in a css file and the code as demo'd below. So instead of all the inline style stuff I have in the code you would add a css rule to the jimu.js\css\jimu.css file.

2. Actually you are viewing that incorrectly. It is Not a child of esri-ui but is just below that element.

3. Same as answer to 1.

            var photoDateDiv = html.create("div", null, document.getElementsByClassName("esri-view-root")[0]);
            if(window.isRTL){
              photoDateDiv.classList.add("myPhotoDate-rtl");
            }else{
              photoDateDiv.classList.add("myPhotoDate");
            }
            photoDateDiv.innerHTML = window.jimuNls.myPhotoDateString;‍‍‍‍‍‍‍‍‍‍‍‍‍‍

.myPhotoDate {
  color: white;
  background-color: rgba(0,0,0,0.80);
  left: auto;
  top: 54px;
  right: 50px;
  bottom: auto;
  width: auto;
  height: auto;
  padding: 0 4px;
  margin: auto;
  z-index: auto;
  position: absolute;
  line-height: 17px;
}

.myPhotoDate-rtl {
  color: white;
  background-color: rgba(0,0,0,0.80);
  left: 50px;
  top: 54px;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  padding: 0 4px;
  margin: auto;
  z-index: auto;
  position: absolute;
  line-height: 17px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Web Appbuilder - How to display additional info on scene? custom widget?

MichaelLev — Fri, 10 Jul 2020 16:09:28 GMT

Dear Robert, thank you so much! I learn so much from you!