Action calling UXP plugin functionality example

Photoshop UXP Plugin API
,
1

Greetings everyone,

I have recently stumbled upon the action recording for uxp plugins. I have read through the documentation and I genuinely have no idea how I would implement it in the first place. Any help just making a simple implementation. I am currently using the React Starter template created using UDT. Can anyone provide a code sample of how I would go about doing it?

Thanks

2

This is a sample plugin for action recording based on the React Starter template. The Demos.jsx part of the template would be replaced by this.

Clicking the button will translate the active layer in the X direction by the amount of the number entered in the panel.

action-record-sample
action-record-sample484Ă—522 45.8 KB

The translate function can be recorded in Photoshop’s Actions panel as usual.

action-recording-sample2
action-recording-sample2690Ă—406 76 KB

I have detailed what is done in which part as a comment in the source code. Please take a look at it.

/**
  * @file action-recording-sample
  * https://forums.creativeclouddeveloper.com/t/action-calling-uxp-plugin-functionality-example/
  * @version 1.0.0
  * @author sttk3.com
*/

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

// adobe
import { app, core, action } from 'photoshop' ;
import { WC } from '../components/WC' ;

import './Translate.css' ;

/**
  * Do something in the plugin. 
  * Translate in the X direction in this sample
  * @param {number} deltaX X(px)
  * @returns {Promise<void>}
*/
const translate = async (deltaX) => {
  // Exit if there is no target
  const doc = app.activeDocument ;
  if(doc.activeLayers.length <= 0) {return ;}

  // Translate selected layer
  const selectedLayer = doc.activeLayers[0] ;
  selectedLayer.translate(deltaX, 0) ;

  /*
    Allow the user to record plugin actions. And define the data to be recorded when doing that.

    The user does not need any special steps other than recording the normal actions of Photoshop
  */
  action.recordAction(
    // RecordActionOptions
    {
      /*
        A command name that will be shown in the actions panel. You may name it whatever you wish
      */
      name: `translate(${deltaX}, 0)`, 

      /*
        The name of the function to execute when replaying the recorded action. 
        The function with that name must exist at the top level. In this sample I chose `actionHandler`
      */
      methodName: `actionHandler`, 
    }, 

    /*
      Info to be passed to the actionHandler, which may be in any format you wish
    */ 
    {
      deltaX: deltaX
    }
  ) ;
} ;

/**
  * Play recorded plugin action
  * @param {ExecutionContext} executionContext You can get information about the currently running executeAsModal from this variable
  * @param {any} info Arguments (info) defined in recordAction can be obtained from this variable
  * @returns {Promise<void>}
*/
const actionHandler = async (executionContext, info) => {
  await translate(info.deltaX) ;
} ;

// Add actionHandler to the top level
window.actionHandler = actionHandler ;

// Main panel
export const PanelTranslate = () => {
  const [deltaX, setDeltaX] = useState(100) ;

  return (
    <div className='container'>
      <WC
        onChange={ (event) => {
          try {
            const x = Number(event.target.value) ;
            setDeltaX(x) ;
          } catch(e) {
            console.error(e) ;
          }
        } }
      >
        <sp-textfield
          style={ {width: '100%', marginBottom: '12px'} }
          value={deltaX.toString()}
        >
          <sp-label slot='label'>Translate X</sp-label>
        </sp-textfield>
      </WC>
      
      <sp-button
        style={ {width: 'calc(100% - 16px)'} }
        variant='primary'
        onClick={ async () => {
          await core.executeAsModal(
            async (executionContext) => {
              await translate(deltaX) ;
            }, 
            
            {commandName: 'Translate X'}
          ) ;
        } }
      >
        Apply
      </sp-button>
    </div>
  ) ;
}
3

So. What if the recordAction is not a function? it gives me an error that it doesn’t exist. When I just write out the whole imported library action as well, it’s not present. There isn’t a lot of documentation. I see there is a thing called recordCommand, however looking online I couldn’t find anything about it, neither in Adobe docs. It also doesn’t seem to work the same way as recordAction function does

4

To be sure, is it correct that what you want to do is to allow users to record the functionality of your UXP plugin as an action?

If that is correct, here is the document.
Recording an Action Step Provided by a UXP Plugin

recordAction is not a function

Since recordAction is a function from Photoshop v25 (2024), that environment is required. If still no function is found, it may be that it is not imported, or that the import destination is incorrect. It is found under photoshop.action.

I don’t know if there is a function called recordCommand. If your purpose is as described above, then you don’t need that function.

5

thanks for the help. I must have overlooked it’s from 2024 version up. What a shame…

1 Like