Part 3: Building Code Apps with SharePoint Online Integration

 Step1: Add the SharePoint Online list connection to your Code App using the following command:

pac code add-data-source -a <connection name> -c <API ID> -d <SharePoint Site(encoded)> -t <list id>

The process of retrieving the connection name and API ID has already been explained in Part 1 and Part 2 of the blog. Please refer to those sections if you are not familiar with how to obtain them.

For the SharePoint site, you must provide the encoded URL. The required format is double URL encoding (also known as percent-encoding applied twice).

How it works

• Normal characters in a URL are encoded once using percent-encoding (RFC 3986):

  • : → %3A

  • / → %2F

• If you encode that result again, the % character itself becomes %25:

  • %3A → %253A

  • %2F → %252F

So:

https:// → https%3A%2F%2F   (once encoded)
https%3A%2F%2F → https%253A%252F%252F

In simple terms, you need to encode the SharePoint site URL twice.
First, encode the SharePoint site URL using any online URL encoder.
Take the encoded result and encode it again.
The final output will be the double-encoded URL, which you need to use in the command.

To get the List ID, navigate to your SharePoint list settings. In the URL of the settings page, you will find the List ID

ignore %7B(at begining) and %7D (at end)
list id = cbe71c44-a4b1-4a43-8b0c-bce1a9086231

Now that we have all the required details, we can run the above command.
Once executed, a file named ListNameService.ts will be generated inside the services folder. This file contains all the functions 
you can use to interact with that particular SharePoint list.

Step 2: Code Update
Once connection is done,then update the code.
I have added one file AssetManagerScreen.tsx file 
code:  Change according to your list columns
import { useEffect, useState } from 'react';
import { AssetmanagerService } from '../Services/AssetmanagerService';
import type { Assetmanager } from '../Models/AssetmanagerModel';
//import '../AssetManagerScreen.css';

function AssetManagerScreen() {
  const [tasks, setTasks] = useState<Assetmanager[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await AssetmanagerService.getAll();
        if (result.success) {
          setTasks(result.data);
        } else {
          console.error('Failed to fetch data:', result.errorMessage);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div className="asset-manager">
      <h1>Asset Manager</h1>
      <div className="task-list">
        {tasks.map((task) => (
          <div key={task.ID} className="task">
            <h2>{task.Title}</h2>
            <p><strong>Status:</strong> {String(task.Status?.Value ?? 'N/A')}</p>
            <p><strong>Manufacturer:</strong> {typeof task.Manufacturer?.Value === 'string' || 
               typeof task.Manufacturer?.Value === 'number' ? task.Manufacturer.Value : 'N/A'}</p>
            <p><strong>Model:</strong> {task.Model || 'N/A'}</p>
            <p><strong>Asset Type:</strong> {typeof task.AssetType?.Value === 'string' || 
            typeof task.AssetType?.Value === 'number' ? task.AssetType.Value : 'N/A'}</p>
            <p><strong>Color:</strong> {typeof task.Color?.Value === 'string' || 
             typeof task.Color?.Value === 'number' ? task.Color.Value : 'N/A'}</p>
            <p><strong>Serial Number:</strong> {task.SerialNumber || 'N/A'}</p>
            <p><strong>Purchase Date:</strong> {task.PurchaseDate || 'N/A'}</p>
            <p><strong>Purchase Price:</strong> {task.PurchasePrice || 'N/A'}</p>
            <p><strong>Order Number:</strong> {task.OrderNumber || 'N/A'}</p>
            <p><strong>Current Owner:</strong> {typeof task.CurrentOwner?.DisplayName === 
               'string' ? task.CurrentOwner.DisplayName : 'N/A'}</p>
            <p><strong>Due Date:</strong> {task.DueDate || 'N/A'}</p>
            <p><strong>Condition Notes:</strong> {task.ConditionNotes || 'N/A'}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default AssetManagerScreen;

Change the App.tsx file

import './App.css';
import ProfileScreen from './Components/ProfileScreen';
import AssetManagerScreen from './Components/AssetManagerScreen';
import { useState } from 'react';

function App() {
  const [currentScreen, setCurrentScreen] = useState('profile');

  const navigateToAssetManager = () => {
    setCurrentScreen('assetManager');
  };

  const navigateToProfile = () => {
    setCurrentScreen('profile');
  };

  return (
    <>
      {currentScreen === 'profile' && (
        <>
          <ProfileScreen />
          <button onClick={navigateToAssetManager}>Go to Asset Manager</button>
        </>
      )}
      {currentScreen === 'assetManager' && (
        <>
          <AssetManagerScreen />
          <button onClick={navigateToProfile}>Back to Profile</button>
        </>
      )}
    </>
  );
}

export default App;

Step 3: Build and Run
Then use below command
npm run build

if it successful then use below command to run in local mode
npm run dev

You will receive a URL in a pop-up window.
Copy this URL and use it to run your app in local mode.