1

I have created a basic SPFx webpart. Essentially the I'm making a call to a 3rd party API and getting some values back and then rendering the results on the screen.

The .tsx file is below.

import * as React from 'react';
import { GraphQLClient} from 'graphql-request';
import ReactHtmlParser from 'react-html-parser';

import { CentralContentProps } from './CentralContentProps'; 
import { CentralContentState } from './CentralContnetState';

import { escape } from '@microsoft/sp-lodash-subset';

export class CentralContent extends React.Component<CentralContentProps, CentralContentState>
{
    constructor(props: CentralContentProps, state: CentralContentState)
    {
        super(props);
        this.state = {items: [], };
    }

    public async getItems()
    {
        const endpoint = 'https://myEndPoint';

        const graphQLClient = new GraphQLClient(endpoint, {
        headers: {
          authorization: 'myToken',
        }
      });

        var centralContentId = "cl56ufet793em0bmutfnd40e2";

        var query = 'query {  uoCIntranetInABoxPages(where: {id: "' + centralContentId + '"}) {    body {      html    }     headline endPublicationDateTime category subCategory updatedAt publicationDateTime  } } ';
        var data = await graphQLClient.request(query); 

        var updatedDateValue = data.theValue[0].updatedAt;
        var htmlValue = data.theValue[0].body.html;
        var headingValue = data.theValue[0].headline;
        var subCategoryValue = data.theValue[0].subCategory;
        var categoryValue = data.theValue[0].category;
        var endPublicationDateTimeValue = data.theValue[0].theValue;
        var publicationDateTimeValue = data.theValue[0].publicationDateTime;

        var dataForProps = [];

        dataForProps.push(updatedDateValue, htmlValue, headingValue, subCategoryValue, categoryValue, endPublicationDateTimeValue, publicationDateTimeValue);

        this.setState({items: dataForProps});

    }
    public componentDidMount() 
    {
        this.getItems();    
    }

    public render(): React.ReactElement<CentralContentProps>
    {
        var centralContentToDisplayArray = [];
        centralContentToDisplayArray = this.state.items;
        
        return <div>
         <div>
            {ReactHtmlParser(centralContentToDisplayArray[1])}
         </div>
         </div>
    }
}

Everything is working. However I'm having trouble working out how to access the WebPart Panel Description to get the value from the .tsx file.

As you can see the following line I've hardcoded the ID i'm passing in the query and I want to get this from the Description field (I'll change the name later)

var centralContentId = "cl56ufet793em0bmutfnd40e2";

Appreciate it may not be the best way of coding this. Any help greatly appreciated.

1 Answer 1

0

Use code like below in render method of your main web part .ts file:

public render(): void {
    const element: React.ReactElement<CentralContentProps> = React.createElement(
        CustomApiConsumer,
        {
            context: this.context,
            description: this.properties.description
        }
    );

    ReactDom.render(element, this.domElement);
}

In CentralContentProps.ts file, add description this:

export interface CentralContentProps {
  description: string;
}

Then, in your .tsx file you can use it like:

var centralContentId = this.props.description;
1
  • Hi @Robl, did you try this? Is it working for you? Let me know if you still need any help with this. Oct 13, 2022 at 11:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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