How do I create a working button that updates dynamically depending on the values of two columns in my SharePoint document library?

Question

I need help with creating a JSON structure for formatting a custom "single line of text" column in my SharePoint document library. The column, called "Start Document Workflow," should display a button that links to a single PowerAutomate workflow.

I want the button text content to update dynamically according to the values of two other custom columns in the library. The columns are "Workflow Stage" (options are "Draft," "Review," and "Submit), and "Stage Complete?" (options are "Yes" and "No").

The internal name for "Workflow Stage" is "WorkflowStage", and the internal name for "Stage Complete?" is "StageComplete_x003f_".

I would like the button to change dynamically according to the entries for these two columns, as follows:

1. "Workflow Stage" = [null] and "Stage Complete?" = [null]: Button displays "Start Draft Workflow"
2. "Workflow Stage" = [any entry] and "Stage Complete?" = [null]: No button displays
3. "Workflow Stage" = [null] and "Stage Complete?" = [any entry]: No button displays
4. "Workflow Stage" = "Draft" and "Stage Complete?" = "No": Button displays "Copy Document"
5. "Workflow Stage" = "Draft" and "Stage Complete?" = "Yes": Button displays "Start Review Workflow"
6. "Workflow Stage" = "Review" and "Stage Complete?" = "No": Button displays "Copy Document"
7. "Workflow Stage" = "Review" and "Stage Complete?" = "Yes": Button displays "Start Submit Workflow"
8. "Workflow Stage" = "Draft" and "Stage Complete?" = "No": No button displays; instead, the text "Submit document for approval"

I have very minimal experience with JSON; any suggestions for a working structure that can produce the desired results? Thanks in advance!

Answer 1

I was able to make this code work, if anyone is interested:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "style": {
        "display": "=if([$File_x0020_Type] == '', 'none', if([$WorkflowStage] == 'Submit' && [$StageComplete_x003f_] == 'Yes', 'none', if(([$WorkflowStage] == 'Draft' || [$WorkflowStage] == 'Review' || [$WorkflowStage] == 'Submit') && [$StageComplete_x003f_] == '', 'none', if([$WorkflowStage] == '' && ([$StageComplete_x003f_] == 'Yes' || [$StageComplete_x003f_] == 'No'), 'none', 'inline-block'))))",
        "border": "none",
        "background-color": "transparent",
        "cursor": "pointer"
      },
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
      },
      "customRowAction": {
        "action": "executeFlow",
        "actionParams": "{\"id\": \"<Flow ID>\"}"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "Flow"
          },
          "style": {
            "padding-right": "6px"
          }
        },
        {
          "elmType": "span",
          "txtContent": "=if(([$WorkflowStage] == 'Draft' || [$WorkflowStage] == 'Review' || [$WorkflowStage] == 'Submit') && [$StageComplete_x003f_] == 'No', 'Copy Document', if([$WorkflowStage] == '' && [$StageComplete_x003f_] == '', 'Start Draft Workflow', if ([$WorkflowStage] == 'Draft' && [$StageComplete_x003f_] == 'Yes', 'Start Review Workflow', if ([$WorkflowStage] == 'Review' && [$StageComplete_x003f_] == 'Yes', 'Start Submit Workflow', ''))))"
        }
      ]
    },
    {
      "elmType": "span",
      "style": {
        "display": "=if([$WorkflowStage] == 'Submit' && [$StageComplete_x003f_] == 'Yes', 'inline-block', 'none')",
        "color": "#666",
        "font-style": "italic",
        "padding": "4px 12px"
      },
      "txtContent": "Submit document for approval"
    }
  ]
}