Experience Builder + reactstrap/bootstrap proper use

[SBerg_VHB]

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

[Anonymous User]

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]

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. 

[SBerg_VHB]

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.

[Marc_Alx]

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

[TimWestern]

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.

[TimWestern]

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?