Experience Builder + reactstrap/bootstrap proper use

2309
6
06-10-2021 07:12 AM
SBerg_VHB
Occasional Contributor

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

 

Tags (1)
0 Kudos
6 Replies
by Anonymous User
Not applicable

Hi @SBerg_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 

 

SBerg_VHB
Occasional Contributor

Thank you @Anonymous User.  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. 

 

0 Kudos
SBerg_VHB
Occasional Contributor

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.

0 Kudos
MarcAlx
New Contributor II

For all those wondering, here's a workaround.

n.b for this example I use scss as a css pre-processor.

As mentioned here, importing bootstrap breaks some part of EXB UI, so basically avoid the following line: 

//in a scss file
@import 'bootstrap/dist/css/bootstrap.css';

 

But how to bypass ? First use as much as possible jimu-ui or clacite if you still need reactstrap try to import only part of bootstrap you need.

e.g let's say you need to use reacstrap's Carousel, import only needed part in your style :

//in a scss file
//global
@import 'bootstrap/scss/_functions.scss';
@import 'bootstrap/scss/_variables.scss';
@import 'bootstrap/scss/_mixins.scss';
//for carousel
@import 'bootstrap/scss/_carousel.scss';

 

Alternatively, you may also try the following, in a div that encloses your widget:

//in a scss file
@import 'bootstrap/dist/css/bootstrap';//no .css here

 

0 Kudos
TimWestern
New Contributor III

I actually ran into this question while looking at the Quick Sample for Widget UI in the Builder Guide here: 

https://developers.arcgis.com/experience-builder/guide/widget-ui/#quick-sample 

I reproduced this code, but the button is gray it picks up no styles form jimu-core at all that I see.  yet in the Tutorial it looks like it should be blue as a primary button.  It made me wonder if my setup of the Experience Builder Client was not importing the CSS for bootstrap propertly or if it was a reactstrap problem.

0 Kudos
TimWestern
New Contributor III

Additional information:

The button shown is actually a screen cap image, so maybe its doing this because I don't have a theme setup yet when going through the tutorial?

0 Kudos