1

SharePoint Library -- Multiple image and HexID field

I am able to display one image by giving full URL of images but i have to filter the images based on HexID, But I am not sure how to apply filter, Please help me how to filter and get the image and bind into web-part,

Below Code.

public render(): React.ReactElement<IFlowDiagramProps> {
var str="";
var str1='<img src="https://xyz.sharepoint.com/sites/xyz/DiagramLib/ManageProjectPortfolio.png" useMap='+usemaps+'>'+str+'</img>';
return (
              <div className={styles.pivotbackgroud} >
                <div className={styles.processheading}>Process Overview</div>
                <Pivot aria-label="Large Link Size Pivot Example" linkSize={PivotLinkSize.normal}>
                  <PivotItem headerText="Flow">            
                    <div id="image_map" dangerouslySetInnerHTML={{__html: str1}}>  //Here i can bind one image
                    </div>                     
                  </PivotItem>

                  <PivotItem headerText="Description">
                  </PivotItem>
                </Pivot>
              </div>
            );
}
0

Here is a way to do this.

Put the logic to get the images in a method:

  private getTheImages() {
    let url = "/_api/web/lists/getByTitle('DiagramLib')/items"+
      "?$select=FileLeafRef"+
      "&$filter=HexID eq '27DB2B7156297051'";
    let images = [];
    this.context.spHttpClient.get(url, SPHttpClient.configurations.v1)
      .then((result:SPHttpClientResponse) => {
          result.json().then((jsonresult) => {
              jsonresult.value.forEach(image => {
                images.push(<img src={`https://xyz.sharepoint.com/sites/xyz/DiagramLib/${image.FileLeafRef}`} />);
              });
      }).then(()=> { 
        this.setState({ fetchedimages: images });
    });
  });
}

Add the constructor to your class:

  constructor(props) {
    super(props);
    this.state = {
      fetchedimages: []
    };
    this.getTheImages();
  }

( Depending on your class constructor you might have to add fetchedimages to the state interface, but I am guessing you have it standard with {} / any )

Now, update your render code:

public render(): React.ReactElement<IFlowDiagramProps> {
  return (
              <div className={styles.pivotbackgroud} >
                <div className={styles.processheading}>Process Overview</div>
                <Pivot aria-label="Large Link Size Pivot Example" linkSize={PivotLinkSize.normal}>
                  <PivotItem headerText="Flow">            
                    <div id="image_map">
                      { this.state.fetchedImages }
                    </div>                     
                  </PivotItem>

                  <PivotItem headerText="Description">
                  </PivotItem>
                </Pivot>
              </div>
            );
}

I would recommend reading up on React and how this is all tied together, in this example I have omitted the image map portion - you probably need some logic to tie that in as well.

| improve this answer | |
  • Thank you so much Rune Its really great help for me.. its working perfectly, – Chandan Sahani Apr 20 at 11:41
  • Happy to help! If this answer solved your issue, please mark it as accepted to help others facing the same issue. – Rune Sperre Apr 20 at 12:03
  • I am new here , how to mark acceptable, I am not able to see any button here – Chandan Sahani Apr 20 at 12:23
  • To the left of the answers, underneath the voting arrows, there should be a checkmark visible that you can press. – Rune Sperre Apr 20 at 12:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.