1
public render(): React.ReactElement<IFlowDiagramProps> {
     // const docRelativeUrl :string = event.selectedRows[0].getValueByName('FileRef');

           var str="";
           var usemaps="";
         this.state.items.map(function(item,key)
         {
           str=item.Maps;
           usemaps=item.UseMap;
         })  
         //var str1='<img src="https://xyz.sharepoint.com/sites/sitename/DiagramLib/ManageProjectPortfolio.png" useMap="#98B3B49952805CFD">'+str+'</img>';

         var requestUri = this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getByTitle('DiagramLib')/items?$select=Name&$filter=HexID eq 27DB2B7156297051";
         var str1='<img src="'+requestUri+' 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}}>
                    </div>                     
                  </PivotItem>

                  <PivotItem headerText="Description">
                    <Label>Pivot #3</Label>
                  </PivotItem>
                </Pivot>
              </div>
            );

  }

How to fetch diagram in this line I have consider requesturi :

var requestUri = this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getByTitle('DiagramLib')/items?$select=Name&$filter=HexID eq 27DB2B7156297051";

var str1='<img src="'+requestUri+' useMap='+usemaps+'>'+str+'</img>';

0

You will have to do a request to access the API.

The out of the box method would be to use the SPHttpClient that is part of the web part context, documentation on that here: https://docs.microsoft.com/en-us/javascript/api/sp-http/sphttpclient

Your code would look something like this:

//add to imports: import {SPHttpClient, SPHttpClientResponse} from '@microsoft/sp-http';

let imagename = "";

let url = "/_api/web/lists/getByTitle('DiagramLib')/items"+
  "?$select=FileLeafRef"+
  "&$filter=HexID eq '27DB2B7156297051'";

this.context.spHttpClient.get(url, SPHttpClient.configurations.v1)
  .then((result:SPHttpClientResponse) => {
      result.json().then((jsonresult) => {
          imagename = jsonresult.value[0].FileLeafRef;
  });

2
  • Hi, Using this i can get only image name , i need to get actuall image and display in spfx webpart using image rendering, Can you please help me ? how to store the image or display in webpart – Chandan Sahani Apr 8 '20 at 7:30
  • Dynamic rendering - one way to do this in react is using the state object. Here is a good blog on the topic: laurakokkarinen.com/… – Rune Sperre Apr 8 '20 at 7:44

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.