If you are a beginner and unfamiliar with Custom APIs, refer to this article: [Step by Step] Create and call Global Custom API

To understand PCF Controls, refer to this article: [Step by Step] Beginner : Create a PCF control 

In this article, I will provide a code snippet demonstrating how to call a Custom API from a PCF control.

Here is the skeleton of my Custom API plugin class and the details of my Custom API:

  • Name : raj_docupilotmetadataapi
  • Input Parameter Name : raj_inputjson
  • Output Parameter Name : raj_metadataoutput

Now that we know the structure of the Custom API, here is the code snippet to call raj_docupilotmetadataapi from a PCF project using webAPI.execute:

export const callCustomAPI= async (
    inputParamValue: string
): Promise<string> => {
    try {
        const apiRequest = {
            getMetadata: () => ({
                operationType: 0,
                operationName: "raj_docupilotmetadataapi",
                parameterTypes: {
                    cat_inputjson: {
                        typeName: "Edm.String",
                        structuralProperty: 1,
                    },
                },
            }),
            cat_inputjson: inputParamValue,
        };

        console.log(`Calling custom action 'raj_docupilotmetadataapi' with Input Parameter: ${inputParamValue}`);

        //@ts-expect-error Suppressing type error due to custom Web API call
        const response = await this.context.webAPI.execute(apiRequest);

        const jsonResponse = await response.json();
        console.log(`Custom action response: ${JSON.stringify(jsonResponse)}`);

        // Extract and return the 'raj_metadataoutput' field
        return jsonResponse.raj_metadataoutput|| "";
    } catch (error) {
        console.error(`Error calling custom action`, error);
        throw error;
    }
};

The above code snippet works for triggering a Custom API with a single parameter. You will need to tweak the function to pass multiple input parameters.

🙂

Advertisements
Advertisements

3 responses to “[Code Snippet] PCF | Calling Dataverse ‘Custom API’ using webAPI.execute”

  1. inspiring1f94c03735 Avatar
    inspiring1f94c03735

    Hi @Rajeev Pentyala, I have a PCF to call a custom action with 4 parameters(3 strings, 1 stringArray), can you kindly advise how to tweak the function to pass multiple input parameters?

  2. inspiring1f94c03735 Avatar
    inspiring1f94c03735

    @Rajeev Pentyala can you advise how to tweak the function to pass multiple input parameters? I have 4 custom API request parameters(3 are strings and 1 is stringArray) and 2 custom API response property (request stream and request success). The request stream is lookup id for request stream record for active upload and type is Guid; the request success is success response for receiving parameters. If true, watch stream. so type is Boolean.

  3. inspiring1f94c03735 Avatar
    inspiring1f94c03735

    Hi, thanks for your blog. It helps me a lot. Can you advise how to tweak the function to pass multiple parameters

Leave a comment