1. Developer guides

Get and set custom field values

Version: 0.4

Required extension points: SitecoreAI Page builder custom field

Required SDK packages: client

Required API access: none

Before you begin

If your Marketplace app uses the SitecoreAI Page builder custom field extension point, and if the custom field is enabled, you use the Marketplace SDK to read and write values into the custom field.

To get and set custom field values:

  1. In the src folder, create a component, for example, components/CustomField.tsx, then save your changes.

    // src/components/CustomField.tsx

import { useState, useEffect } from "react";
import { ClientSDK } from "@sitecore-marketplace-sdk/client";

export default function CustomField({ client }: { client: ClientSDK | null }) {
  const [input, setInput] = useState<string>("");

  // Get the latest value on mount and whenever the client changes
  useEffect(() => {
    if (!client) return;
    const fetchValue = async () => {
      const latest = await client.getValue();

      // If latest is a JSON string, pretty print it
      if (typeof latest === "string") {
        try {
          const parsed = JSON.parse(latest);
          if (typeof parsed === "object" && parsed !== null) {
            setInput(JSON.stringify(parsed, null, 2));
            return;
          }
        } catch {
          // Not a JSON string, continue with the original string
        }
        setInput(latest);
      } else if (typeof latest === "object" && latest !== null) {
        setInput(JSON.stringify(latest, null, 2));
      } else {
        setInput(latest ? String(latest) : "");
      }
    };
    fetchValue();
  }, [client]);

  // Set the input value when the client changes
  const handleSave = async () => {
    try {
      await client?.setValue(input, true);
      client?.closeApp();
    } catch {
      // Optionally handle error
    }
  };

  return (
    <div>
      <textarea
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Enter value here"
        rows={4}
      />
      <button onClick={handleSave}>Save</button>
      <button onClick={() => client?.closeApp()}>Close</button>
    </div>
  );
}

    This script:

    • Stores user input in state: const [input, setInput] = useState<string>("");

    • When the app loads, gets the current custom field value and stores it in the input state: const latest = await client.getValue(); setInput(latest);

    • When the user clicks Save, stores the textarea value in Sitecore and closes the app modal: await client?.setValue(input, true); client?.closeApp();

    • Returns a Save button that stores the changes and closes the app's modal.

  2. In the SDK initialization code where you run the useMarketplaceClient hook, import the component you created in the previous step:

    React

    // src/App.tsx
import CustomField from "./components/CustomField";

    Next.js (Pages Router)

    // src/pages/index.tsx
import CustomField from "@/components/CustomField";

  3. In the same file, include the component in the return statement, then save your changes. Make sure to pass client to the component:

    return (
  <>
    {/* ... */}
    <CustomField client={client} />
  </>
);

  4. In the SitecoreAI Page builder, locate the custom field, then click Open app.

  5. In the modal where your Marketplace app appears, in the textarea, enter a value, such as { "icon": "pencil" }, then click Save.

    The custom field displays the entered value.

If you have suggestions for improving this article, let us know!