Using Object Data with React Charts

Here you’ll use Objects, Headless APIs, and custom element remote applications to create a dynamic chart for data dashboards. First, you’ll set up a new DXP instance with CORS enabled for Object API calls. Then, you’ll create an Object for receiving and storing data. After adding data to the Object using REST APIs, you’ll download and build the provided React FusionCharts application. Once the code is compiled, you’ll host the generated .js file in the Liferay Document Library and copy its WebDAV URL. Finally, you’ll use this URL to create a remote app for the React chart and deploy it as a Page widget.

The chart is configured to call the Object via Headless API every five seconds, which returns the Object’s data and updates the chart dynamically.

Use Liferay Objects with React charts to create dynamic visuals for data dashboard.

Setting Up Liferay DXP

Start a new Liferay DXP instance by running

docker run -it -m 8g -p 8080:8080 liferay/dxp:2024.q1.1

Sign in to Liferay at http://localhost:8080 using the email address test@liferay.com and the password test. When prompted, change the password to learn.

Then, follow these steps to add the /o/c/* URL pattern to the Default Portal CORS Configuration:

  1. Open the Global Menu (Global Menu), go to the Control Panel tab, and click Security Tools.

  2. Go to the Portal Cross-Origin Resource Sharing (CORS) tab and click Default Portal CORS Configuration.

    Click Default Portal CORS Configuration

  3. Add a URL Pattern with the /o/c/* value and click Save. This enables CORS for all Object APIs.

    Add the /o/c/* URL Pattern for Object APIs.

Creating an Object for the React Chart

  1. Open the Global Menu (Global Menu), go to the Control Panel tab, and click Objects.

  2. Click the Add button (Add Button) and enter these values:

    FieldValue
    LabelX3J8-Object
    Plural LabelX3J8-Objects
    NameX3J8Object
    note

    The provided React app uses these values.

  3. Select the new Object draft, click the Field tab, and add these fields:

    LabelField NameTypeRequired
    LabellabelText
    ValuevalueInteger
  4. Click the Details tab and click Publish.

Publishing an Object creates and activates a new application for receiving and storing data. You can now access it via the Liferay UI or Headless APIs.

Adding Data to the Object using Headless APIs

  1. Open Liferay’s API Explorer (i.e., localhost:8080/o/api), click the REST Applications drop-down menu, and click c/x3j8objects.

  2. Enter this data into the request body for the batch POST API:

    [
      {
        "label": "FOO",
        "value": "250"
      },
      {
        "label": "BAR",
        "value": "200"
      },
      {
        "label": "GOO",
        "value": "150"
      },
      {
        "label": "BAZ",
        "value": "100"
      },
      {
        "label": "QUX",
        "value": "50"
      }
    ]
    
  3. Click Execute to add the data entries to the Object.

Once you’ve finished adding data, you can set up the provided React server. This includes a FusionChart implementation that makes API calls to X3J8-Object and displays its data.

Setting Up the React Chart

Follow these steps to download and build the React application:

  1. Download and unzip the React project.

    curl https://resources.learn.liferay.com/dxp/latest/en/liferay-development/building-applications/liferay-x3j8.zip -O
    
    unzip liferay-x3j8.zip
    
    cd liferay-x3j8
    
  2. Verify you have node and yarn installed. If you don’t, run the following command and follow the prompts:

    ./setup_tutorial.sh
    
  3. Navigate to the React application’s folder and start the React server.

    cd x3j8-custom-element
    
    yarn start
    

    Once started, go to localhost:3000 to view the React chart. It calls the c/x3j8objects service using Basic Authentication and retrieves the Object’s data every five seconds.

    View the React chart at localhost:3000.

  4. Build the React project.

    yarn build
    

    This command creates an optimized production build, which includes the files necessary for running the application as a remote app.

  5. Verify the build is successful and take note of the application’s .js file.

    Creating an optimized production build...
    Compiled successfully.
    
    File sizes after gzip:
    
      523.77 kB  build/static/js/main.5a6819d5.js
      20 B       build/static/css/main.31d6cfe0.css
    
    note

    The .css file is unnecessary for this tutorial.

Once the code is compiled, you can host the application’s .js file in the Liferay Document Library and copy its WebDAV URL.

Hosting the Application’s .js File

  1. Open the Site Menu (Site Menu), expand Content & Data, and click Documents and Media.

  2. Drag and drop the .js file into the upload area.

    When uploaded to the Document Library, the file is assigned a unique WebDAV URL, which you’ll use to create the remote app.

  3. Click the Info icon (Info Icon) and select the uploaded file.

  4. Copy the file’s WebDAV URL and save it for use in the next step.

    For example, http://localhost:8080/webdav/guest/document_library/main.5a6819d5.js.

    Copy the .js file's WebDAV URL.

Creating a Remote App for the React Chart

  1. Open the Global Menu (Global Menu), click the Applications tab, and select Remote Apps.

  2. Click the Add button (Add Button).

  3. Enter these values:

    FieldValue
    NameX3J8-Custom-Element
    TypeCustom Element
    HTML Element Namex3j8-custom-element
    URLWebDAV URL for the .js file
    Portlet Category NameRemote Apps
  4. Click Save.

Once Saved, Liferay creates a widget for the remote app that you can deploy to Site Pages. This widget is listed under the application’s Portlet Category Name (i.e., Remote Apps for this tutorial).

You can deploy the remote app widget to Site Pages.

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy