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

1. Extending Studio
eZ Conference 2017 | London | 08.06.2017

2. About Us
Kamil Musiał
PHP Symfony Developer
@kkmusial
Piotr Nalepa
Senior UI Developer
@sunpietro

3. We are from eZ Systems Polska | Katowice

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. 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. The Studio – live website preview

7. The Studio – landing page management

8. The Studio – content scheduling

9. The Studio – Form Builder

10. eZ Platform EE – features in the Content Editor
• Flex Workflow,
• Date Based Publishing

11. Content Editor - Flex Workflow

12. Content Editor - Date Based Publishing

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. eZ Platform development stack
PHP (Symfony) & JavaScript (YUI3)

15. So how to extend eZ Platform EE?

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. Create block in PHP - Twig
(ezblock.html.twig)
{{ text_field }}

18. Create block in PHP - BlockType class
• implements interface:
EzSystemsLandingPageFieldTypeBundleFieldTypeLandingPageM
odelBlockType
or
• extend abstract boilerplate:
EzSystemsLandingPageFieldTypeBundleFieldTypeLandingPageM
odelAbstractBlockType

19. Create block in PHP - BlockType class
Methods to implement:
• getTemplateParameters(BlockValue $blockValue): array,
• createBlockDefinition(): BlockDefinition,
• checkAttributesStructure(array $attributes)

20. Create block in PHP - BlockType class
getTemplateParameters(BlockValue $blockValue): array
• contains logic,
• return values for view

21. Create block in PHP - BlockType class
createBlockDefinition(): BlockDefinition()
Returns a definition containing block parameters and array of its attributes:
EzSystemsLandingPageFieldTypeBundleFieldTypeLandingPageDe
finitionBlockDefinition

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. 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. 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. Create block in YAML - Twig - no changes
(ezblock.html.twig)
{{ text_field }}

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. Create block in YAML
Form:

28. Create block in YAML
Rendered block:

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. Create block in YAML + PHP
Rendered block:

31. The JS app structure
App
Services +
plugins
Views +
plugins

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. 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. 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. 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. Creating a block config popup JS view
Y.my.EzBlockConfigFormView = Y.Base.create('myEzBlockConfigFormView',
Y.eZS.BlockPopupFormView, [], {
anyKindOfMagicMethod: function () {}
});

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. 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. 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. Creating a form builder field config form JS view
Y.my.CustomFormFieldConfigFormView =
Y.Base.create('myCustomFormFieldConfigFormView',
Y.fb.FormFieldConfigFormView, [], {
anyKindOfMagicMethod: function () {}
});

41. eZ Platform EE v2

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. Thank you!
Questions?
Contact us on Twitter:
@sunpietro | @kkmusial