Feature/issue 3089 on get expression display value

src/base-interfaces.ts

@@ -77,6 +77,11 @@ export interface ISurvey extends ITextProcessor, ISurveyErrorOwner {
   processHtml(html: string): string;
   getSurveyMarkdownHtml(element: Base, text: string, name: string): string;
   getRendererForString(element: Base, name: string): string;
+  getExpressionDisplayValue(
+    question: IQuestion,
+    value: any,
+    displayValue: string
+  ): string;
   isDisplayMode: boolean;
   isDesignMode: boolean;
   areInvisibleElementsShowing: boolean;

src/question_expression.ts

@@ -111,10 +111,15 @@ export class QuestionExpressionModel extends Question {
   }
   protected getDisplayValueCore(keysAsText: boolean, value: any): any {
     var val = this.isValueEmpty(value) ? this.defaultValue : value;
-    if (this.isValueEmpty(val)) return "";
-    var str = this.getValueAsStr(val);
-    if (!this.format) return str;
-    return (<any>this.format)["format"](str);
+    var res = "";
+    if (!this.isValueEmpty(val)) {
+      var str = this.getValueAsStr(val);
+      res = !this.format ? str : (<any>this.format)["format"](str);
+    }
+    if (!!this.survey) {
+      res = this.survey.getExpressionDisplayValue(this, val, res);
+    }
+    return res;
   }
   /**
    * You may set this property to "decimal", "currency", "percent" or "date". If you set it to "currency", you may use the currency property to display the value in currency different from USD.

src/survey.ts

@@ -900,6 +900,17 @@ export class SurveyModel extends Base
     SurveyModel
   > = this.addEvent<SurveyModel>();
 
+  /**
+   * The event is fired before expression question convert it's value into display value for rendering.
+   * <br/> `sender` - the survey object that fires the event.
+   * <br/> `options.question` - The expression question.
+   * <br/> `options.value` - The question value.
+   * <br/> `options.displayValue` - the display value that you can change before rendering.
+   */
+  public onGetExpressionDisplayValue: EventBase<SurveyModel> = this.addEvent<
+    SurveyModel
+  >();
+
   //#endregion
 
   constructor(jsonObj: any = null) {
@@ -1572,6 +1583,19 @@ export class SurveyModel extends Base
     this.onTextRenderAs.fire(this, options);
     return options.renderAs;
   }
+  getExpressionDisplayValue(
+    question: IQuestion,
+    value: any,
+    displayValue: string
+  ): string {
+    const options = {
+      question: question,
+      value: value,
+      displayValue: displayValue,
+    };
+    this.onGetExpressionDisplayValue.fire(this, options);
+    return options.displayValue;
+  }
   private getBuiltInRendererForString(element: Base, name: string): string {
     if (this.isDesignMode) return LocalizableString.editableRenderer;
     return undefined;

tests/question_expressiontests.ts

@@ -75,6 +75,23 @@ QUnit.test("Display text + fraction digitals", function(assert) {
   expression.maximumFractionDigits = 2;
   assert.equal(expression.displayValue, "21.33", "2 digits");
 });
+QUnit.test("Display text + survey.onExpressionDisplayValue event", function(
+  assert
+) {
+  var survey = createSurveyWith3Questions();
+  survey.onGetExpressionDisplayValue.add((sender, options) => {
+    //if (options.question.name !== "exp") return;
+    options.displayValue = "$" + options.displayValue + ".";
+  });
+  var expression = <QuestionExpressionModel>(
+    survey.pages[0].addNewQuestion("expression", "exp")
+  );
+  expression.expression = "10";
+  survey.data = { q1: 4 };
+  expression.displayStyle = "decimal";
+  assert.equal(expression.displayValue, "$10.", "Use event");
+});
+
 function createSurveyWith3Questions(): SurveyModel {
   var survey = new SurveyModel();
   var page = survey.addNewPage();