Select to view content in your preferred language

Calcite Controls have some trick to getting them to work?

223
5
a month ago
TimWestern
Occasional Contributor

I do a lot of custom widget work, and it feels like every time I go to setup Calcite Controls, I run through the same issues of trying to figure out how to get them to load.

Often, the issue is that it does appear in the DOM in source when you inspect it, but the visible parts do not appear on screen, in widget or over app anywhere.  If I highlight over it in dom yu may see an outline of where it should be but it doesn't display (EXB 1.14 currently, btw)

I know I got these working in another project's widget, but what am I missing in the setup instructions to be able to see them work properly?

So here's what I was trying to do:

I wanted to explore the options for creating alert mechanisms in Experience builder for users.  For example, when a save of an update to a feature occurs, or when an error occurs.  These could appear  inline or as a modal of some kind (the old JS way would be an alert box)

So I had three ideas I might use to do this:

1. have them appear inline with a link to dismiss that maybe you can ignore if you scroll past.
2. Have them appear in a modal that you must dismiss before moving on
3. Have them appear using CalciteCard instead of CalciteAlert

At the moment I get the buttons to fire them to work, I see them in the back end but I'm not seeing them on the widget itself below the buttons as you would expect.  I've tried using CSS tricks to get it to change positioning to absolute high Z-index on top of the app, and that doesn't seem to help either.

Any ideas?

0 Kudos
5 Replies
JeffreyThompson2
MVP Regular Contributor

Have you looked at the components in the Storybook? There is an Alert and a Modal component.

https://developers.arcgis.com/experience-builder/storybook/?path=/docs/components-jimu-ui-index-aler...

GIS Developer
City of Arlington, Texas
TimWestern
Occasional Contributor

You mean as opposed to the Calcite Controls? I thought Calcite was the way things were moving?

I know the Calcite Components have an Alert, Notice, Card, and Modal component i've used in the past.

I will give the storybook controls a look too, it might give me a work around for now.  Thanks for that.

(I'm not marking it as a solution, because the instructions for setting up Calcite components in the docs are less than barebones it seems. I do appreciate pointing at whatever is built into jimu directly.)

0 Kudos
JeffreyThompson2
MVP Regular Contributor

The Storybook is a set of pre-built React components used in Experience Builder. They are the building blocks that Experience Builder uses to build up its UI and they are Calcite based.

GIS Developer
City of Arlington, Texas
TimWestern
Occasional Contributor

So that's interesting, I didn't know they were Calcite based.  I've only been in the ArcGIS App side for  a little while, but I had seen two different ways Calcite controls could be used.  One for systems that maybe aren't as tightly integrated, and then the react versions.   The react versions seem to have some rendering issues in some versions of Enterprise / Portal.  (But I am not sure that's what I was running into)

It took some doing but I did get some sample alerts going in a separate app that I am going to try and use as an example in another widget. I'd love to figure out why CalciteAlert and CalciteModal weren't working for me though they seem to serve particular purposes.

When I get more time to debug I'll look into it more.

 

0 Kudos
JeffreyThompson2
MVP Regular Contributor

Maybe I overstated my certainty. Everything in ESRI's web environment has been built or is being re-built in Calcite. 

The Storybook is more closely built on Reactstrap than Calcite.

https://reactstrap.github.io/?path=/story/home-installation--page

GIS Developer
City of Arlington, Texas
0 Kudos