Hi, I have a framework question about ArcGIS ExB. Thanks for any input. As documented Experience Builder uses reactstrap under the hood for widget ui. When creating a custom widget aiming to target specific components in reactstrap such as forms http://reactstrap.github.io/components/form/, what is the proper way to reference these components? I am seeing that if we import the components import in the widget :
{ Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
...the resulting widget in the experience is not referencing the elements correctly including the bootstrap CSS and the components are basically not styled at all.
I am hoping to clarify how and when to target jimi-ui, reactstrap, and direct bootstrap in widget ui creation.
Thanks for any information.
Sam
Hi @Sam-Berg_VHB - I'm not on the ExB team, so this is just my best "guess", but I believe you should be using the jimu-ui components always. Per the doc, https://developers.arcgis.com/experience-builder/guide/widget-ui/ it says when using jimu-ui you get the bootstrap CSS classes applied. I'd suspect that using the reactstrap reference would give you trouble with CSS.
import { Checkbox, TextInput, Select, Option, Button, Label, Input, Container, Row, Col, Link } from 'jimu-ui';
You can see the samples throughout using jimu-ui: https://github.com/Esri/arcgis-experience-builder-sdk-resources/search?p=1&q=jimu-ui vs 0 references to reactstrap: https://github.com/Esri/arcgis-experience-builder-sdk-resources/search?q=reactstrap
Thank you @KevinHibma-EsriCA. I actually just found expected results when pulling in reactstrap components and bootstrap.css simply using the following:
import { Button, Form, FormGroup, Label, Input, FormText, Alert} from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
I definitely understand the best practice to use jimu-ui first whenever possible though. Even with jimi-ui I did not see default bootstrap styles (for the FormGroup for example) applied until running the css import in the custom widget though.
I am now seeing the conflicts between bootstrap.css and jimu-ui.css. For example bringing in the bootstrap makes some buttons in the app transparent like a sidepanel collapse button. So how do you get form control styling is the current question I have.