Progress bar with titles. Page name –> title fix #6925

packages/survey-angular-ui/src/components/progress/buttons/progress.component.html

@@ -14,9 +14,9 @@
           (click)="isListElementClickable(index) ? clickListElement(index) : null">
           <div
             [class]="model.css.progressButtonsPageTitle"
-            [title]="page.locNavigationTitle.renderedHtml || page.name"
+            [title]="page.renderedNavigationTitle"
           >
-            {{ page.locNavigationTitle.renderedHtml || page.name }}
+            {{ page.renderedNavigationTitle }}
           </div>
           <div
             [class]="model.css.progressButtonsPageDescription"

packages/survey-vue3-ui/src/components/progress/ProgressButtons.vue

@@ -21,9 +21,9 @@
           >
             <div
               :class="css.progressButtonsPageTitle"
-              :title="page.locNavigationTitle.renderedHtml || page.name"
+              :title="page.renderedNavigationTitle"
             >
-              {{ page.locNavigationTitle.renderedHtml || page.name }}
+              {{ page.renderedNavigationTitle }}
             </div>
             <div
               :class="css.progressButtonsPageDescription"

src/knockout/components/progress/buttons.html

@@ -4,7 +4,7 @@
         <div data-bind="css: survey.css.progressButtonsListContainer">
             <ul data-bind="foreach: survey.visiblePages, css: survey.css.progressButtonsList">
                 <li data-bind="css: $parent.getListElementCss($index), click: $parent.isListElementClickable($index) ? $parent.clickListElement.bind($parent, $index) : null">
-                    <div data-bind="css: css.progressButtonsPageTitle, text: locNavigationTitle.koRenderedHtml() || name, attr: { title: locNavigationTitle.koRenderedHtml() || name }"></div>
+                    <div data-bind="css: css.progressButtonsPageTitle, text: renderedNavigationTitle, attr: { title: renderedNavigationTitle }"></div>
                     <div data-bind="css: css.progressButtonsPageDescription, text: locNavigationDescription.koRenderedHtml(), attr: { title: locNavigationDescription.koRenderedHtml() }"></div>
                 </li>
             </ul>

src/page.ts

@@ -73,6 +73,9 @@ export class PageModel extends PanelModelBase implements IPage {
     this.locNavigationTitle.strChanged();
     this.locNavigationDescription.strChanged();
   }
+  public get renderedNavigationTitle(): string {
+    return this.locNavigationTitle.renderedHtml || this.title || this.name;
+  }
   public get passed(): boolean {
     return this.getPropertyValue("passed", false);
   }

src/panel.ts

@@ -327,18 +327,21 @@ export class PanelModelBase extends SurveyElement<Question>
       (this.showDescription && this.isDesignMode &&
         settings.designMode.showEmptyDescriptions);
   }
-  public localeChanged() {
+  public localeChanged(): void {
     super.localeChanged();
     for (var i = 0; i < this.elements.length; i++) {
       (<Base>(<any>this.elements[i])).localeChanged();
     }
   }
-  public locStrsChanged() {
+  public locStrsChanged(): void {
     super.locStrsChanged();
     for (var i = 0; i < this.elements.length; i++) {
       this.elements[i].locStrsChanged();
     }
   }
+  public get renderedNavigationTitle(): string {
+    return this.title || this.name;
+  }
   /**
    * Returns a character or text string that indicates a required panel/page.
    * @see SurveyModel.requiredText

src/react/reactSurveyProgressButtons.tsx

@@ -62,9 +62,9 @@ export class SurveyProgressButtons extends SurveyNavigationBase {
       >
         <div
           className={this.css.progressButtonsPageTitle}
-          title={page.navigationTitle || page.name}
+          title={page.renderedNavigationTitle}
         >
-          {page.navigationTitle || page.name}
+          {page.renderedNavigationTitle}
         </div>
         <div
           className={this.css.progressButtonsPageDescription}

src/surveyToc.ts

@@ -32,7 +32,7 @@ export function createTOCListModel(survey: SurveyModel, onAction?: () => void) {
   var items = (pagesSource || []).map(page => {
     return new Action({
       id: page.name,
-      title: ((<any>page)["navigationTitle"]) || page.title || page.name,
+      title: page.renderedNavigationTitle,
       action: () => {
         if (typeof document !== undefined && !!document.activeElement) {
           !!(<any>document.activeElement).blur && (<any>document.activeElement).blur();

src/vue/progressButtons.vue

@@ -21,9 +21,9 @@
           >
             <div
               :class="css.progressButtonsPageTitle"
-              :title="page.locNavigationTitle.renderedHtml || page.name"
+              :title="page.renderedNavigationTitle"
             >
-              {{ page.locNavigationTitle.renderedHtml || page.name }}
+              {{ page.renderedNavigationTitle }}
             </div>
             <div
               :class="css.progressButtonsPageDescription"

tests/surveytests.ts

@@ -232,6 +232,21 @@ QUnit.test(
     );
   }
 );
+QUnit.test("PageModel.renderedNavigationTitle", function (assert) {
+  const survey = new SurveyModel({
+    pages: [
+      { name: "page1" },
+      { name: "page2", title: "Page 2" },
+      { name: "page3", title: "Page 3", navigationTitle: "NavPage 3" },
+      { name: "page4", navigationTitle: "NavPage 4" },
+    ]
+  });
+  assert.equal(survey.pages[0].renderedNavigationTitle, "page1", "page1");
+  assert.equal(survey.pages[1].renderedNavigationTitle, "Page 2", "page2");
+  assert.equal(survey.pages[2].renderedNavigationTitle, "NavPage 3", "page3");
+  assert.equal(survey.pages[3].renderedNavigationTitle, "NavPage 4", "page4");
+});
+
 QUnit.test("PageModel passed property", function (assert) {
   var json = {
     pages: [