ReactJS and Power Pages

[BrookJ]

Hi,

Is it possible to incorporate React components with Power Pages. If so, how would I go about doing so?

Thanks,

[ragavanrajan]

Hi @BrookJ 

You can develop PCF components using React and add them to the portal. 

Adding official reference 

https://docs.microsoft.com/en-us/power-apps/maker/portals/component-framework 

Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

[eugenevanstaden]

@BrookJ 
You can also add the React JS directly in portal and consume the Portal API if you need to read/write outside of the Form.

I usually build VueJS components in Portal so React would work same way. 

You can either reference the React libraries in Webfile, or just add your compiled JS as Webfile and reference as you would any other script.


I add all my references in the Footer template:

and then consume it on the page or form you need.

eg. Custom document upload control in Vue

Or updating the Datepicker to something like this:

PCF controls are not always the correct approach!

[charkhaniakash]

Hi @eugenevansta

I created web api using power App   "https://site-8j3on.powerappsportals.com/api/data/v9.0/accounts?$select=name,creditonhold,address1_la... , so  wanted to create a crud operation using this Api  in react , so is it possible , i have tried a lot and still i am strugging to get response from api . please help

[eugenevanstaden]

The URL is incorrect. You don't need to append data/v9.

The details here 

https://learn.microsoft.com/en-us/power-pages/configure/write-update-delete-operations

[charkhaniakash]

Thank you @eugenevanstaden  , I have given you dummy Api  I just want to showing my API structure.

But i tried of using my correct API in my react to fetch data , but no response . please anyone can help me . Even I searched a lot of articles related to this , but didnt found

[eugenevanstaden]

Can you show more details on how you calling the API.

[charkhaniakash]

This is my code with working Api   , and the image which i attached is the actual response when i see from power Apps . Please help me

import React, { useState, useEffect } from 'react';

import axios from 'axios';

const UserManagement = () => {

  const [users, setUsers] = useState([]);

  const [selectedUser, setSelectedUser] = useState(null);

  useEffect(() => {

    axios.get('https://site-8j3on.powerappsportals.com/_api/cra1c_userdetails0d10s?$select=cra1c_firstname0d10,cra1...')

      .then(response => {

        setUsers(response.data.value);

      })

      .catch(error => {

        console.error('Error fetching data:', error);

      });

  }, []);

  const handleSelectUser = (user) => {

    setSelectedUser(user);

  };

  const handleCreateUser = () => {

    const newUser = {

      cra1c_firstname0d10: 'New User First Name',

      cra1c_fullname0d10: 'New User Full Name',

      cra1c_lastname0d10: 'New User Last Name',

      cra1c_emailaddress0d10: 'newuser@example.com',

      cra1c_telephone0d10: '123-456-7890',

    };

    axios.post('https://site-8j3on.powerappsportals.com/_api/cra1c_userdetails0d10s', newUser)

      .then(response => {

        console.log('User created successfully', response.data);

        setUsers([...users, response.data]);

      })

      .catch(error => {

        console.error('Error creating user:', error);

      });

  };

  const handleUpdateUser = () => {

    if (!selectedUser) {

      return;

    }

    const userId = selectedUser.id;

    // Prepare the updated user data.

    const updatedUser = {

      cra1c_firstname0d10: 'Updated First Name',

      cra1c_fullname0d10: 'Updated Full Name',

      cra1c_lastname0d10: 'Updated Last Name',

      cra1c_emailaddress0d10: 'updateduser@example.com',

      cra1c_telephone0d10: '555-555-5555',

    };

    axios.put(`https://site-8j3on.powerappsportals.com/_api/cra1c_userdetails0d10s/${userId}`, updatedUser)

      .then(response => {

        console.log('User updated successfully', response.data);

        setUsers(users.map(user => (user.id === userId ? response.data : user)));

        setSelectedUser(null);

      })

      .catch(error => {

        console.error('Error updating user:', error);

      });

  };

  const handleDeleteUser = () => {

    if (!selectedUser) {

      return;

    }

    const userId = selectedUser.id;

    axios.delete(`https://site-8j3on.powerappsportals.com/_api/cra1c_userdetails0d10s/${userId}`)

      .then(response => {

        console.log('User deleted successfully', response.data);

        setUsers(users.filter(user => user.id !== userId));

        setSelectedUser(null);

      })

      .catch(error => {

        console.error('Error deleting user:', error);

      });

  };

  return (

    <div>

      <h1>User Management</h1>

      <div>

        <h2>User List</h2>

        <ul>

          {users.map(user => (

            <li key={user.id} onClick={() => handleSelectUser(user)}>

              {user.cra1c_fullname0d10}

            </li>

          ))}

        </ul>

      </div>

      <div>

        <h2>Selected User</h2>

        {selectedUser && (

          <div>

            <p>Name: {selectedUser.cra1c_fullname0d10}</p>

            <button onClick={handleUpdateUser}>Update User</button>

            <button onClick={handleDeleteUser}>Delete User</button>

          </div>

        )}

      </div>

      <div>

        <h2>Create New User</h2>

        <button onClick={handleCreateUser}>Create User</button>

      </div>

    </div>

  );

};

export default UserManagement;

[eugenevanstaden]

You need to wrap the request via the safeAjax function. This handles the Auth.

webapi.safeAjax({
type: "POST",
url: "/_api/accounts",
contentType: "application/json",
data: JSON.stringify({
"name": "Sample Account"
}),
success: function (res, status, xhr) {
//print id of newly created table record
console.log("entityID: "+ xhr.getResponseHeader("entityid"))
}
});

[charkhaniakash]

Thank you so much @eugenevanstaden