preview_mode.rst 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. Preview Mode
  2. ============
  3. Preview Mode is an optional view of an object before it is persisted or updated.
  4. The preview step can be enabled for an admin entity by overriding the public property
  5. ``$supportsPreviewMode`` and setting it to true.
  6. .. code-block:: php
  7. <?php
  8. // src/AppBundle/AdminPostAdmin.php
  9. class PostAdmin extends AbstractAdmin
  10. {
  11. public $supportsPreviewMode = true;
  12. / ..
  13. }
  14. This will show a new button during create/edit mode named preview.
  15. .. figure:: ../images/preview_mode_button.png
  16. :align: center
  17. :alt: Preview Button
  18. While in preview mode two buttons will be shown to approve or decline persistence of the
  19. entity. Decline will send you back to the edit mode with all your changes unpersisted but
  20. still in the form so no data is lost and the entity can be further adjusted.
  21. Accepting the preview will store the entity as if the preview step was never there.
  22. .. figure:: ../images/preview_show.png
  23. :align: center
  24. :alt: Preview Button
  25. Simulating front-end rendering
  26. ------------------------------
  27. Preview can be used to render how the object would look like in your front-end environment.
  28. However by default it uses a template similar to the one of the show action and works with
  29. the fields configured to be shown in the show view.
  30. Overriding the preview template ``SonataAdminBundle:CRUD:preview.html.twig`` can be done either
  31. globally through the template configuration for the key 'preview':
  32. .. configuration-block::
  33. .. code-block:: yaml
  34. # app/config/config.yml
  35. sonata_admin:
  36. templates:
  37. preview: AppBundle:CRUD:preview.html.twig
  38. Or per admin entity by overriding the ``getTemplate($name)`` and returning the appropriate template when the key
  39. matches 'preview':
  40. .. code-block:: php
  41. <?php
  42. // src/AppBundle/Admin/PostAdmin.php
  43. // ...
  44. public function getTemplate($name)
  45. {
  46. switch ($name) {
  47. case 'preview':
  48. return 'AppBundle:CRUD:preview.html.twig';
  49. break;
  50. default:
  51. return parent::getTemplate($name);
  52. break;
  53. }
  54. }
  55. In either way the template should be extending your own layout, injecting the form in it
  56. and finally overriding the action buttons to show the approve/decline buttons like the
  57. default preview.html.twig.
  58. The entity is passed to the view in a variable called **object**. If your original view expects
  59. a different object you can just set your own variables prior to calling parent().
  60. .. code-block:: jinja
  61. {# 'AppBundle:CRUD:preview.html.twig #}
  62. {% extends 'AppBundle::layout.html.twig' %}
  63. {% use 'SonataAdminBundle:CRUD:base_edit_form.html.twig' with form as parentForm %}
  64. {% import 'SonataAdminBundle:CRUD:base_edit_form_macro.html.twig' as form_helper %}
  65. {# a block in 'AppBundle::layout.html.twig' expecting article #}
  66. {% block templateContent %}
  67. {% set article = object %}
  68. {{ parent() }}
  69. <div class="sonata-preview-form-container">
  70. {{ block('parentForm') }}
  71. </div>
  72. {% endblock %}
  73. {% block formactions %}
  74. <button class="btn btn-success" type="submit" name="btn_preview_approve">
  75. <i class="fa fa-check"></i>
  76. {{ 'btn_preview_approve'|trans({}, 'SonataAdminBundle') }}
  77. </button>
  78. <button class="btn btn-danger" type="submit" name="btn_preview_decline">
  79. <i class="fa fa-times"></i>
  80. {{ 'btn_preview_decline'|trans({}, 'SonataAdminBundle') }}
  81. </button>
  82. {% endblock %}
  83. Keep in mind that the whole edit form will now appear in your view.
  84. Hiding the fieldset tags with css ``display:none`` will be enough to only show the buttons
  85. (which still have to be styled according to your wishes) and create a nice preview-workflow:
  86. .. code-block:: css
  87. .sonata-preview-form-container .row {
  88. display: none;
  89. };
  90. Or if you prefer less:
  91. .. code-block:: scss
  92. div.sonata-preview-form-container {
  93. .row {
  94. display: none;
  95. };
  96. }