Actions

Template engine: Difference between revisions

From LimeSurvey Manual

 
(20 intermediate revisions by 3 users not shown)
Line 7: Line 7:
* User can show some question the way they want (with some html ability)
* User can show some question the way they want (with some html ability)
* User can show all questions as a table
* User can show all questions as a table
NB: A lot of usage for template editor is minor changes to the CSS. In that case, you do ''not'' want to be independent of core changes.


= Requirements =
= Requirements =
Line 12: Line 14:
== Must have ==
== Must have ==


* Template files in template zip packages can override question view files
*<strike>Template files in template zip packages can override question view files</strike> Not possible anymore, see question templates.
* <strike>A custom template should be possible to be completely independent of core, but not required to</strike> As above.
* Template zip package can upload template files in template editor
* Template zip package can upload template files in template editor
* Actual views used in public part must use the template engine
* Actual views used in public part must use the template engine
Line 18: Line 21:
== Should have ==
== Should have ==


* Possible to edit Twig/Mustache templates in template editor
* Possible to edit Twig templates in template editor
* Use same tags as Backbone template engine (e.g. [http://underscorejs.org/ Underscore]) (both Mustache and Twig can configure this, and Underscore too, for that matter ([http://underscorejs.org/#template instructions]))
* <strike>Use same tags as Backbone template engine (Twig can configure this)</strike>


== Could have ==
== Could have ==
Line 25: Line 28:
*  Include another file : the actual view use different files (see [https://manual.limesurvey.org/Talk:Template_engine Talk])
*  Include another file : the actual view use different files (see [https://manual.limesurvey.org/Talk:Template_engine Talk])
* Add Twig filter to process EM
* Add Twig filter to process EM
* Idea :
** User can only add some css/update template.css : use case : bigger button
** User want only a simple HTML update : some real forum example : help above answers, show text at right of answers, multiple movenext/moveprev (in 3.0 : we can put any button/index we want : no id for this button : don't break HTML)
** User choose another 'theme' for his template : use case : theming (lot of color, font-style ....)
*** in 3.0 replace boostrap.css but this create a new complete template (with views and other): a GUI and a theme system ? Need some pstpl too i think
*** pstpl can be part of theming too : using [https://getbootstrap.com/components/#panels panel] or [https://getbootstrap.com/components/#wells well] class at different position (wquestion-wrapper / form-wrapper etc ...)
** User choose another framework : @todo : included view use 'framework class' in core
** User want to completely use his own views


== Will not have ==
== Will not have ==


* No additional templates will be added to the template engine (like token form)
* <del>No additional templates will be added to the template engine (like token form)</del>
** See discussion
** example why must able https://www.limesurvey.org/forum/can-i-do-this-with-limesurvey/107945-modify-label#146221
* layout must not be updated ?
** See https://github.com/LimeSurvey/LimeSurvey/blob/develop/application/views/layouts/public.php


= Ways of working with Twig =
= Twig =
 
http://twig.sensiolabs.org/


{|
{|
Line 43: Line 60:
| Branch on boolean || {% if trueOrFalse %} ... {% endif %}  
| Branch on boolean || {% if trueOrFalse %} ... {% endif %}  
|-
|-
| Translate || Add a filter, like <nowiki>{{"Translate me"|eT}}</nowiki>  
| Ternary operator|| <nowiki>{{ foo ? 'yes' : 'no' }}</nowiki> [http://twig.sensiolabs.org/doc/templates.html#other-operators doc]
|-
|-
| Include another template file || Include tag TODO
| Translate || Use a filter: <nowiki>{{"This will be translated" | t }}</nowiki>
|-
| Include another template file || <nowiki>{{ include('./subviews/head.twig') }}</nowiki>
|-
|-
| Sandbox || Yes  
| Sandbox || Yes  
Line 66: Line 85:


https://www.limesurvey.org/community-services/feature-requests
https://www.limesurvey.org/community-services/feature-requests
= Manual construction =
[[Template_config.xml]]

Latest revision as of 16:42, 18 January 2017

Since Louis factored out all HTML from qanda and added a configuration file to the templates, it's a small task to add a template engine, replace the PHP views with e.g. Twig templates.

Use case

  • Template providers don't have to worry about core changes in the question view files
  • Template providers can apply any CSS framework specific HTML they want, like Foundation, Bootstrap etc.
  • User can show some question the way they want (with some html ability)
  • User can show all questions as a table

NB: A lot of usage for template editor is minor changes to the CSS. In that case, you do not want to be independent of core changes.

Requirements

Must have

  • Template files in template zip packages can override question view files Not possible anymore, see question templates.
  • A custom template should be possible to be completely independent of core, but not required to As above.
  • Template zip package can upload template files in template editor
  • Actual views used in public part must use the template engine

Should have

  • Possible to edit Twig templates in template editor
  • Use same tags as Backbone template engine (Twig can configure this)

Could have

  • Include another file : the actual view use different files (see Talk)
  • Add Twig filter to process EM
  • Idea :
    • User can only add some css/update template.css : use case : bigger button
    • User want only a simple HTML update : some real forum example : help above answers, show text at right of answers, multiple movenext/moveprev (in 3.0 : we can put any button/index we want : no id for this button : don't break HTML)
    • User choose another 'theme' for his template : use case : theming (lot of color, font-style ....)
      • in 3.0 replace boostrap.css but this create a new complete template (with views and other): a GUI and a theme system ? Need some pstpl too i think
      • pstpl can be part of theming too : using panel or well class at different position (wquestion-wrapper / form-wrapper etc ...)
    • User choose another framework : @todo : included view use 'framework class' in core
    • User want to completely use his own views

Will not have

Twig

http://twig.sensiolabs.org/

Function Twig
Echo variable {{var}}
Echo field in variable {{var.field}} or {{var['field']}}
Loop variable {% for user in users %} ... {% endfor %}
Branch on boolean {% if trueOrFalse %} ... {% endif %}
Ternary operator {{ foo ? 'yes' : 'no' }} doc
Translate Use a filter: {{"This will be translated" | t }}
Include another template file {{ include('./subviews/head.twig') }}
Sandbox Yes

Security

Longer article about template injection: http://blog.portswigger.net/2015/08/server-side-template-injection.html

The lowest risk approach is to simply use a trivial template engine such as Mustache

About CPU load: It wold be easy for a template designer to make a loop within a loop within a loop etc, to exhaust the CPU power of the server. This vulnerability is in all template engines where you can loop an array (Mustache, Twig). To protect against this, the server should have a max script runtime set.

BUT: Rendering PDF takes a long time, how to know the right limit?

Test instructions

How to write good bug reports and feature requests:

https://www.limesurvey.org/community-services/bug-tracker

https://www.limesurvey.org/community-services/feature-requests

Manual construction

Template_config.xml