Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Php reports sumit
Php reports sumit
Loading in …3
×
1 of 43

Extending Studio

1

Share

Download to read offline

The presentation about extending landing page editor with new landing page blocks and new form builder fields by using PHP and JavaScript code.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Extending Studio

  1. 1. Extending Studio eZ Conference 2017 | London | 08.06.2017
  2. 2. About Us Kamil Musiał PHP Symfony Developer @kkmusial Piotr Nalepa Senior UI Developer @sunpietro
  3. 3. We are from eZ Systems Polska | Katowice
  4. 4. What is eZ Platform EE? eZ Platform EE is the extended version of eZ Platform containing: • The Studio, • Flex Workflow, • Form Builder, • Date Based Publishing, • Recommendation Engine.
  5. 5. The Studio - features Using the Studio you can: • Preview live website, • Create landing pages using blocks, • Manage landing pages, • Schedule content display, • Build forms.
  6. 6. The Studio – live website preview
  7. 7. The Studio – landing page management
  8. 8. The Studio – content scheduling
  9. 9. The Studio – Form Builder
  10. 10. eZ Platform EE – features in the Content Editor • Flex Workflow, • Date Based Publishing
  11. 11. Content Editor - Flex Workflow
  12. 12. Content Editor - Date Based Publishing
  13. 13. Date Based Publishing – CRON config Using ezsystems-cron bundle: date_based_published.cron.publish_scheduled: class: '%date_based_published.cron.publish_scheduled.class%' tags: - { name: console.command } - { name: ezpublish.cron.job, schedule: '* * * * *' } Changes publication status based on a publication date in CRON job.
  14. 14. eZ Platform development stack PHP (Symfony) & JavaScript (YUI3)
  15. 15. So how to extend eZ Platform EE?
  16. 16. Adding new landing page blocks 1/2 To create new blocks you have to: • Configure blocks definitions by implementing PHP classes, • Or, use the YAML configuration (the newest thing!).
  17. 17. Create block in PHP - Twig (ezblock.html.twig) {{ text_field }}
  18. 18. Create block in PHP - BlockType class • implements interface: EzSystemsLandingPageFieldTypeBundleFieldTypeLandingPageM odelBlockType or • extend abstract boilerplate: EzSystemsLandingPageFieldTypeBundleFieldTypeLandingPageM odelAbstractBlockType
  19. 19. Create block in PHP - BlockType class Methods to implement: • getTemplateParameters(BlockValue $blockValue): array, • createBlockDefinition(): BlockDefinition, • checkAttributesStructure(array $attributes)
  20. 20. Create block in PHP - BlockType class getTemplateParameters(BlockValue $blockValue): array • contains logic, • return values for view
  21. 21. Create block in PHP - BlockType class createBlockDefinition(): BlockDefinition() Returns a definition containing block parameters and array of its attributes: EzSystemsLandingPageFieldTypeBundleFieldTypeLandingPageDe finitionBlockDefinition
  22. 22. Create block in PHP - BlockType class BlockAttributeDefinition Block form contains fields based on attribute type. Available types: • integer, • string, • text, • embed, • select (supports multiple select) Developer can create new attribute types - look at DemoBundle
  23. 23. Create block in PHP - BlockType class public function createBlockDefinition() { return new BlockDefinition( 'ezblock', // Block type (unique) 'eZ Block', // Name of block 'default', // Block category (currently unsupported) 'ezblock.svg', // icon for thumbnail [], // extra views that can be hardcoded [ new BlockAttributeDefinition( 'text_field', // Attribute's ID (unique) 'Text field', // Attribute' name 'text', // Attribute's type '/[^s]/', // regex for frontend validation 'Sample content', // regex validation fail message true, // is field required? false, // should this attribute input be displayed inline to the previous? [], // default value [] // available options (for select) ), ] ); }
  24. 24. Create block in PHP - BlockType class checkAttributesStructure(array $attributes) • advanced attribute validation (after front end validation) - 3rd party APIs, DB calls etc. • throws exception for invalid attributes: EzSystemsLandingPageFieldTypeBundleExceptionInvalidBlockAttributeExcep tion
  25. 25. Create block in YAML - Twig - no changes (ezblock.html.twig) {{ text_field }}
  26. 26. Create block in YAML - Config Extended Simplified blocks: ezblock: initialize: true name: ezblock category: default thumbnail: ezblock.svg views: default: template: ezblock.html.twig name: Default view attributes: text_field: name: Text Field type: text regex: /.*/ regexErrorMessage: 'error' blocks: ezblock: initialize: true thumbnail: ezblock.svg views: ezblock.html.twig attributes: text_field: text
  27. 27. Create block in YAML Form:
  28. 28. Create block in YAML Rendered block:
  29. 29. Create block in YAML + PHP initialize: false class EzBlock extends ConfigurableBlockType { public function getTemplateParameters(BlockValue $blockValue) { $attributes = $blockValue->getAttributes(); $attributes['text_field'] .= " Additional info"; return $attributes; } } ez_systems.landing_page.block.ez_block: class: EzSystemsLandingPageFieldTypeBundleFieldTypeLandingPageModelBlockEzBlock tags: - { name: landing_page_field_type.block_type, alias: ezblock } arguments: - '@ezpublish.landing_page.block_definition_factory'
  30. 30. Create block in YAML + PHP Rendered block:
  31. 31. The JS app structure App Services + plugins Views + plugins
  32. 32. The communication between JS app layers • From the bottom to top: addTarget() when creating a new view instance, • Invoke the fire() method to send an event up to services, • Using callbacks
  33. 33. Adding new landing page blocks 2/2 To implement custom UI for new blocks you have to (in JavaScript): • Create a plugin that adds new blocks definitions to landing page creator/editor, • Create custom views for each new kind of blocks, • Create custom config popups for each new kind of blocks.
  34. 34. Creating a JS plugin to add new block definition Y.my.Plugin.AddEzBlockView = Y.Base.create('addEzBlockViewPlugin', Y.Plugin.Base, [], { initializer: function () { this.get('host').addBlock('ezblock', Y.my.EzBlockView); }, }, { NS: 'addEzBlockViewPlugin' }); Y.eZ.PluginRegistry.registerPlugin(Y.my.Plugin.AddEzBlockView, [ 'landingPageCreatorView', 'dynamicLandingPageCreatorView', 'dynamicLandingPageEditorView' ]);
  35. 35. Creating a landing page block JS view Y.my.EzBlockView = Y.Base.create('myEzBlockView', Y.eZS.BlockView, [], { }, { ATTRS: { viewClassName: { value: 'my.EzBlockView', readOnly: true }, editForm: { valueFn: function () { return new Y.my.EzBlockConfigFormView({bubbleTargets: this}); } } } });
  36. 36. Creating a block config popup JS view Y.my.EzBlockConfigFormView = Y.Base.create('myEzBlockConfigFormView', Y.eZS.BlockPopupFormView, [], { anyKindOfMagicMethod: function () {} });
  37. 37. Adding new fields to Form Builder To add new fields custom UI to Form Builder you have to (in JavaScript): • Create a plugin that adds new fields definitions to the Form Builder, • Create custom views for each new kind of fields, • Create custom config form for each new kind of fields.
  38. 38. Creating a JS plugin to add new field definition Y.my.Plugin.AddCustomFieldView = Y.Base.create('addCustomFieldViewPlugin', Y.Plugin.Base, [], { initializer: function () { this.get('host').addFormFieldViewsMapItem('customField', Y.my.CustomFieldView); }, }, { NS: 'addCustomFieldViewPlugin' }); Y.eZ.PluginRegistry.registerPlugin(Y.my.Plugin.AddCustomFieldView, ['fbFieldsTabView']);
  39. 39. Creating a form builder field JS view Y.my.CustomFormFieldView = Y.Base.create('customFormFieldView', Y.fb.BaseFormFieldView, [], { }, { ATTRS: { type: { value: 'custom' }, configForm: { valueFn: function () { return new Y.my.CustomFormFieldConfigFormView({ bubbleTargets: this, viewModel: this.get('model') }); } }, } });
  40. 40. Creating a form builder field config form JS view Y.my.CustomFormFieldConfigFormView = Y.Base.create('myCustomFormFieldConfigFormView', Y.fb.FormFieldConfigFormView, [], { anyKindOfMagicMethod: function () {} });
  41. 41. eZ Platform EE v2
  42. 42. Additional resources https://ezplatform.com/Blog/Extending-eZ-Studio-with-new-blocks https://ezplatform.com/Blog/Learn-how-to-implement-a-custom-UI-for-Landing-Page-block- configuration-popup http://yuilibrary.com/yui/docs/api/
  43. 43. Thank you! Questions? Contact us on Twitter: @sunpietro | @kkmusial

×