Popup header can't be removed in arcgis javascript API 4.28

1476
19
11-16-2023 04:09 AM
SoulaimaneBenmessaoud
New Contributor

I would like to remove the header of the popup, but it is not possible to achieve this by overriding the CSS class directly. This limitation arises because the header is wrapped within a shadow root, as implemented by the calcite components. I am using arcgis javascript API version 4.28.9

SoulaimaneBenmessaoud_0-1700136211458.png

SoulaimaneBenmessaoud_1-1700136275097.png

 

Tags (2)
19 Replies
JoelBennett
MVP Regular Contributor

I don't think there's a documented way to do this.  However, if the following executes prior to the creation of the Popup, it appears to achieve the desired results:

require(["esri/chunks/panel"], function(panel) {
    panel.Panel.prototype.renderHeaderNode = function() { return null; };
});

 

0 Kudos
SoulaimaneBenmessaoud
New Contributor

Okay, I see, but I am currently using the @ArcGIS/core library. Even when I try to find the module, I get an error that it can't be found. I see that there is not a module named 'panel' inside the 'chunks' directory.

 

require(['@arcgis/chunks/panel'], function (panel) {
  panel.Panel.prototype.renderHeaderNode = function () {
    return null;
  };
});

 

0 Kudos
JoelBennett
MVP Regular Contributor

In that case, you'll need to use ESM syntax:

import * as panel from "@arcgis/core/chunks/panel.js";

panel.P.prototype.renderHeaderNode = function() { return null; };
0 Kudos
ViktorSafar
Occasional Contributor II

There is no `panel.js` under `@arcgis/core/chunks`

v4.28.9

0 Kudos
JoelBennett
MVP Regular Contributor

I suppose there's some difference I can't explain, but here it is.

0 Kudos
ViktorSafar
Occasional Contributor II

While I was able to make that import work and use the advised update to prototype.renderHeaderNode, it does not help as it corrupts the entire popup:

ViktorSafar_1-1700513422672.png

 

 

0 Kudos
JoelBennett
MVP Regular Contributor

Hmm...it worked well in a simplistic example I set up locally.  Does it cause any error information to be written to the developer tools console when you try it?

0 Kudos
ViktorSafar
Occasional Contributor II

I spoke too soon, it did not work. Import directly from the URL, while it should be possible, fails.

If I download the file and save it as node_modules/@arcgis/core/chunks/panel.js, compiler starts complaining

  

ViktorSafar_0-1700568802900.png

 

Here is a simple repro solution

https://github.com/viktor-safar-geodata/popup-header

0 Kudos
JoelBennett
MVP Regular Contributor

I see...there are some extra layers of complexity added by Node and React that I'm not sure how to help you navigate.  If you don't find a way to get this working, @Justin_Greco provided another viable solution.

0 Kudos