Change question title rendering, render separately number, title and require texts.

[andrewtelnov]

This is the second rewriting the way we are rendering question title and we hope it is the last one. Initially we were rendering question title using the template, survey.questionTitleTemplate. By default, it was: “{no}. {title}{require}”. So, the question title renders as: “1. What is your name?*”

It works perfectly. End-users can change the template in any way they want, for example to: “{no}){require} {title}”, and result becomes: “1) * What is your Name?”.

Unfortunately, this approach does not allow to give different styles for numbering and require text. There are many requests of this. For example, to render a cycle around the number or render the required (*) text in red color. There was a work-around to do it, by using mark-down, but it was an overcomplicated solution.

As result we decided to start render question number, title and require texts separately. Additionally two news styles were introduced: . sv-question__num and . sv-question__required-text. Developer needs to override these styles to change question number and require text look. It works perfectly, unless the survey.questionTitleTemplate is not changed. If it is changed, then we are rendering them as one string. It needs when somebody needs require text in another position or want to have another symbol, instead of dot, in numbering, for example “(1)” or “# 1”, instead of “1.”.

New property We review many requests and come to conclusion that we can replace survey.questionTitleTemplate with a simple choice property. We introduced a new property survey.questionTitlePattern. There are four choices: numTitleRequire, “1. What is your name? ”, it is a default value numRequireTitle, “1. What is your name?” requireNumTitle, “* 1. What is your name?” numTitle, “1. What is your name?”, do not show require text at all. You can change the title style to point end-users that the question is required.

Important survey.questionTitleTemplate becomes obsolete. It is loaded into survey model, but doesn’t serialized back. Survey Model on setting the property will try to convert the template into according questionTitlePattern proeprty. For example “{require} {no}) {title}” will change survey.questionTitlePattern into “requireNumTitle” value. Additionally, survey.questionStartIndex becomes “1)”.

Prefix and postfix for numbering Another change, survey.questionStartIndex has a prefix and postfix now. The default value is “1.”, where "1" tells that you want to start your question numbering from 1 and postfix is “.”. You can set it to “# 1)” or “(a)”. It is the alternative to questionTitleTemplate where you were able to have a prefix and postfix for numbering. We hope it solves all know issues and allows to introduce you what you require with minimum/zero coding.

[xxxKOTxxx]

Sorry, but why don't You use formatter function like: (index: number, isRequired: boolean, title: string) => string (html code as result) ?

[andrewtelnov]

@xxxKOTxxx We are generating several spans:

<h5>
  <span style="style_for_part_one">the first part text<span>
  <span style="style_for_part_two">the second part<span>
  <span style="style_for_part_three">the third part text<span>
<h5>

You proposol will generate one string. We had this approach in the very beginning. Our customers want to have circles around number with some fancy colors and the same about required text. And they want to have a different layout. We believe that the current solution solve all scenarious, at least all scenarios we know about.

Thank you, Andrew

[xxxKOTxxx]

I mean allow to generate HTML markup, not only text string. F.e. (index: number, isRequired: boolean, title: string) => `<h5><span style="index">${index}<span><span style="required">${isRequired}<span><span style="title">${title}<span><h5>`; Ok, I understand. It's Your balance between flexibility and simplicity.

[andrewtelnov]

@xxxKOTxxx Yes, it is correct. We want that end-users will be able to change the question title pattern by changing properties in SurveyJS Creator Property Grid.

Thank you, Andrew