AIFeedback¶

A specialized FormCell designed exclusively for AI experiences. It displays thumbs-up and thumbs-down vote buttons for collecting user feedback on AI-generated content.

Unlike traditional FormCells, AIFeedback does not support Validation, HelperText, or RequiredIndicator properties. It is only supported in FormCellSection (SectionedTable) and MultiColumn layouts, not supported in FormCellContainer.

Do: Use AIFeedback to allow users to share their feedback on AI experiences.

Don't: Do not use AIFeedback for feedback that is not related to AI.

Note: This control does not embed any AI capabilities itself. It is a UI control that facilitates AI experiences. It is up to the developer to determine the AI scenarios.

When assigning a rule to a property of AIFeedback, the rule will be passed an instance of the following proxy class as an argument:

• AIFeedbackFormCellProxy

AIFeedback Properties¶

Caption¶

The caption text displayed alongside the vote buttons. Limited to a maximum of two lines, longer text is truncated with an ellipsis.

• type: string

IsEditable¶

Disables or enables interaction. The control will have a reduced opacity if this property is false.

• type: boolean

• default: true

IsVisible¶

Sets the visibility of the control.

• type: boolean

• default: true

OnValueChange¶

Action or rule to perform after the vote value changes.

• type: ActionOrRule
• Formatter and Binding are not supported

Separator¶

Sets the visibility of the separator line below the control. This property will take precedence over ControlSeparator in section and is only supported for Form Cell control in Sectioned Table and not supported in Form Cell Container.

• type: boolean

• default: true

Styles¶

Set styles for Background, Caption, and VoteButtons.

• type: object with following properties.

Background¶

The string value is a style class name of Background.

• AIFeedbackBackground style class

Caption¶

The string value is a style class name of Caption.

• AIFeedbackCaption style class

VoteButtons¶

The string value is a style class name of VoteButtons.

• VoteButtons style class

Value¶

The current feedback vote value. Accepted values are: "None", "Up", "Down" (case-sensitive). If an invalid value is provided, it defaults to "None".

• type: enum
• default: "None"

The value of this property must be one of the known values listed below.

_Name¶

• type: string

_Type¶

• type: const

The value of this property must be:

"Control.Type.FormCell.AIFeedback"

Examples¶

{
  "_Type": "Page",
  "_Name": "AIFeedbackPage",
  "Caption": "AI Feedback Example",
  "Controls": [{
    "_Type": "Control.Type.SectionedTable",
    "_Name": "SectionedTable",
    "Sections": [{
      "Header": {
        "Caption": "AI Feedback Section"
      },
      "_Type": "Section.Type.FormCell",
      "Controls": [{
        "_Type": "Control.Type.FormCell.AIFeedback",
        "_Name": "AIFeedbackCell",
        "Caption": "Was this AI response helpful?",
        "Value": "None",
        "IsEditable": true,
        "IsVisible": true,
        "Separator": true,
        "OnValueChange": "/MDKApp/Rules/OnVoteChange.js",
        "Styles": {
          "Background": "AIFeedbackBgStyle",
          "Caption": "AIFeedbackCaptionStyle",
          "VoteButtons": "AIFeedbackVoteButtonStyle"
        }
      }]
    }]
  }]
}

Style Classes Definition¶

/* AI Feedback - Background */
.AIFeedbackBgStyle {
  background-color: #F5F5F5;
}

/* AI Feedback - Caption */
.AIFeedbackCaptionStyle {
  font-color: #333333;
  font-size: 14;
  font-typeface: bold;
}

/* AI Feedback - Vote Buttons */
.AIFeedbackVoteButtonStyle {
  font-color: #0070F2;
}

OnValueChange Rule¶

// /MDKApp/Rules/OnVoteChange.js
export default function OnVoteChange(context) {
  // context is the AIFeedbackFormCellProxy
  const vote = context.getValue(); // "None", "Up", or "Down"
  console.log(`User voted: ${vote}`);

  if (vote === 'Up') {
    context.setCaption('Thanks for your positive feedback!');
  } else if (vote === 'Down') {
    context.setCaption('Sorry to hear that. We will improve.');
  } else {
    context.setCaption('Was this AI response helpful?');
  }
}