How to use the Storybook UI Components in your own custom Experience Builder Widget?

JeroenCaarls

Hi there,

I'm trying to create a custom Experience Builder widget. In this widget I would like to use the Jimu UI Library as described here. My starting point was the 'simple' widget in the latest Experience Builder developer edition. In my widget I would like to show a simple card as in described in Storybook.

 

 

 

/** @jsx jsx */ // <-- make sure to include the jsx pragma
import { React, AllWidgetProps, jsx } from 'jimu-core'
import { Card, CardBody } from 'jimu-ui'
import { IMConfig } from '../config'

export default class Widget extends React.PureComponent<AllWidgetProps<{}>, any>{
  render(){
    return (
      <div className="widget-demo jimu-widget m-2" >
      <div>
    <Card>
      <img
        alt="Card image cap"
        src="https://source.unsplash.com/300x200?city"
        width="100%"
      />
      <CardBody>
        <h5>Custom Footer</h5>
        <p>Example text for the card content.</p>
      </CardBody>
    </Card>
    </div>
    </div>
    )
  }
}

 

 

 

I'm new to React/Jimu-UI and it seems like I'm doing it wrong. I'm getting this error:

 

 

'CardBody' cannot be used as a JSX component.
  Its instance type 'CardBody' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("c:/ArcGISExperienceBuilder/client/your-extensions/widgets-sample-code/Workflow/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

 

 

The card won't render properly. I didn't find any proper example on how to do this. Can somebody give me a hint on how to use components in my widget.

Thanks for your help!

 

JeroenCaarls

Seems like these VS Code errors can be ignored, will figure out later how to fix this.

Modified my code a little bit I'm, my tiles/cards are now stored in an array, added Col and CardImg. Layout is fine now.

        <div>
          <Row>
            {this.tiles.map((tile) => (
              <Col sm="12" md="6" lg="4">                
                  <Card className='m-3' onClick={() => this.handleClick(tile.link,tile.target)}>                  
                    <CardImg
                    
                      src={tile.imageSrc}
                      alt={tile.imageAlt}
                      style={{
                        height: "180px",
                        marginLeft: "auto",
                        marginRight: "auto"
                      }}
                      top
                    />
                    <CardBody className='widget-card-content'>
                      <h5>{tile.title}</h5>
                      <p>{tile.description}</p>
                    </CardBody>
                  </Card>
              </Col>
            ))}
          </Row>
        </div>