Select an image for a custom Infographic component

253
1
Jump to solution
11-10-2021 06:13 AM
DougLogsdon2
New Contributor III

Greetings! I would like to create an Infographic component for a data summary like below:

DougLogsdon2_0-1636552451669.png

I would like to be able to select an image for the background from the settings panel...similar to the included Image widget:

DougLogsdon2_1-1636552985400.png

I believe this is using:

import { ImageSelector } from 'jimu-ui/advanced/resource-selector';
though there are no TypeScript definitions within ExB 1.6 and also not documented yet in Storybook.
 
If anymore has info on setting this up regarding parameters and updating settings changes (or if something else should be used entirely) it would be greatly appreciated! Thanks again!

 

0 Kudos
1 Solution

Accepted Solutions
DougLogsdon2
New Contributor III

This solution came full circle for me, this is how you can reference image assets for custom widgets:

import { ImageSelector } from 'jimu-ui/advanced/resource-selector'; 

<ImageSelector
  buttonClassName='my-class-names'
  widgetId={id} 
  buttonLabel={'myButtonLabel'} 
  buttonSize='sm'
  onChange={handleResourceChange} 
  imageParam={selectedImageParam} />

 Good luck!

View solution in original post

0 Kudos
1 Reply
DougLogsdon2
New Contributor III

This solution came full circle for me, this is how you can reference image assets for custom widgets:

import { ImageSelector } from 'jimu-ui/advanced/resource-selector'; 

<ImageSelector
  buttonClassName='my-class-names'
  widgetId={id} 
  buttonLabel={'myButtonLabel'} 
  buttonSize='sm'
  onChange={handleResourceChange} 
  imageParam={selectedImageParam} />

 Good luck!

0 Kudos