Skip to main content

I’ve built a custom scripting extension that I intend to launch from a record button, send that record’s ID to the extension, and execute my script. I configured the button to launch my extension, which it does, but I can’t seem to get it to register the ID of the record clicked. I’ve tried using both useRecordActionData and registerRecordActionDataCallback, the latter example can be found below:

function CheckAvailability() {
  const  recordActionData, setRecordActionData] = useState(null);

  const callback = useCallback((data) => {
    console.log('Record action received', data);
    setRecordActionData(data);
  },  ])

  useEffect(() => {
      const unsubscribe = registerRecordActionDataCallback((data) => {
          console.log('Record action received:', data);
          if (data && data.recordId) {
              console.log(`Button pressed on record: ${data.recordId}`);
              // Process data here
          } else {
              console.error('No recordId found in action data');
          }
      });

      console.log('Callback registered.');

      return () => unsubscribe();
  },  callback]);

  return (
        <ul>
            <li>Record id: {recordActionData.recordId}</li>
            <li>View id: {recordActionData.viewId}</li>
            <li>Table id: {recordActionData.tableId}</li>
        </ul>
  );
}
initializeBlock(() => <CheckAvailability />);

I’ve tried numerous variations of the code to register the callback and set the current record info, but no luck getting anything to work. No matter what I do, the button will only launch the extension and nothing more. And unfortunately, I cannot use a simple Run Script action because my full script utilizes other libraries to perform it actions. How can I fix this to accept the Record ID on button click, or is that even possible with custom script extension built using the Extensions SDK?

Hm, when testing useRecordActionData, could I confirm you’re testing it either with via ‘Perform record action’ below, or after you’ve released the app?  Just tried it via Perform record action and it received the record ID fine

 

I can use that to get data output to the console, but not to the extension. What is the trick to getting your extension to react to this record action so that execute code based on the selected record and display results back to the user?

I updated my return method to the following:

return (
    <div>    
    {recordActionData ? (
          <ul>
              <li>Record id: {recordActionData.recordId}</li>
              <li>View id: {recordActionData.viewId}</li>
              <li>Table id: {recordActionData.tableId}</li>
          </ul>
        ) : (
          <div>Please select a record.</div>
        )}
        </div>
    /*<GoogleOAuthProvider clientId={CLIENT_ID}>
    </GoogleOAuthProvider>*/
  );

But every time I send a record action via Perform record action, the component still displays “Please select a record.”

Hm, if it helps, here’s some code that seems to do what you want:

import React from "react";
import { useRecordActionData, initializeBlock } from "@airtable/blocks/ui";


function LatestRecordAction() {
  const recordActionData = useRecordActionData();
  if (recordActionData === null) {
    return <span>No events yet</span>;
  }

  return (
    <ul>
      <li>Record id: {recordActionData.recordId}</li>
      <li>View id: {recordActionData.viewId}</li>
      <li>Table id: {recordActionData.tableId}</li>
    </ul>
  );
}
initializeBlock(() => <LatestRecordAction />);

 

Interesting. Using your code, my buttons still don’t change anything in the extension (though the Perform record action manual check works now). What is your button field configuration? Or do you need to deploy the extension for the button actions to work properly?

Got it! I had to release the block. Thanks for your help.

Reply


Terms & Conditions