Inline editable field on view page

Good day everyone!

My question is how to render inline editable field in any place of entity view template.
I found this: https://github.com/orocrm/platform/blob/master/src/Oro/Bundle/FormBundle/Resources/doc/reference/inline-editable-view-component.md

How can i use this component to render text or choice or date field?
I’ve tried a different combinations but always got an JS errors.
Can you provide an example? And how this feature interacts with symfony’s validation?

---

Docker environment for Symfony2/OroCRM/OroBAP development on Windows platform
https://github.com/stepansib/sf-oro-docker

Topic

[Mike KudelyaParticipant]

Hi

I have created inline edition based on first name of contact.

Inline component:

XHTML

<div {{ UI.renderPageComponentAttributes({ module: 'oroform/js/app/components/inline-editable-view-component', options: { frontend_type: 'text', value: entity.getFirstName(), fieldName: 'firstName', metadata: { inline_editing: { enable: true, save_api_accessor: { route: 'oro_api_patch_entity_data', http_method: 'PATCH', default_route_parameters: { className: oro_class_name(entity, true), id: entity.id } } } } } }) }}></div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<div {{ UI.renderPageComponentAttributes({             module: 'oroform/js/app/components/inline-editable-view-component',             options: {                 frontend_type: 'text',                 value: entity.getFirstName(),                 fieldName: 'firstName',                 metadata: {                     inline_editing: {                         enable: true,                         save_api_accessor: {                             route: 'oro_api_patch_entity_data',                             http_method: 'PATCH',                             default_route_parameters: {                                 className: oro_class_name(entity, true),                                 id: entity.id                             }                         }                     }                 }             }         }) }}></div>

Add new ‘text’ frontend type vendor/oro/platform/src/Oro/Bundle/FormBundle/Resources/public/js/tools/frontend-type-map.js, all available editors types you can find there:

JavaScript

define(function(require) { 'use strict'; var frontendTypeMap = { tags: { viewer: require('orotag/js/app/views/viewer/tags-view'), editor: require('orotag/js/app/views/editor/tags-editor-view') }, text: { viewer: require('customoro/js/app/views/text-view'), editor: require('oroform/js/app/views/editor/text-editor-view') } }; return frontendTypeMap; });

1 2 3 4 5 6 7 8 9 10 11 12 13 14

define(function(require) {     'use strict';     var frontendTypeMap = {         tags: {             viewer: require('orotag/js/app/views/viewer/tags-view'),             editor: require('orotag/js/app/views/editor/tags-editor-view')         },         text: {             viewer: require('customoro/js/app/views/text-view'),             editor: require('oroform/js/app/views/editor/text-editor-view')         }     };     return frontendTypeMap; });

Text field view: src/Custom/Bundle/OroBundle/Resources/public/js/app/views/text-view.js:

JavaScript

define(function(require) { 'use strict'; var BaseView = require('oroui/js/app/views/base/view'); var _ = require('underscore'); var TextView = BaseView.extend({ showDefault: true, template: require('tpl!customoro/templates/viewer/text-view.html'), listen: { 'change model': 'render' }, initialize: function(options) { this.fieldName = options.fieldName; return TextView.__super__.initialize.apply(this, arguments); }, getTemplateData: function() { var value = this.model.get(this.fieldName); return { value: value }; } }); return TextView; });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

define(function(require) {     'use strict';     var BaseView = require('oroui/js/app/views/base/view');     var _ = require('underscore');       var TextView = BaseView.extend({         showDefault: true,         template: require('tpl!customoro/templates/viewer/text-view.html'),         listen: {             'change model': 'render'         },         initialize: function(options) {             this.fieldName = options.fieldName;             return TextView.__super__.initialize.apply(this, arguments);         },         getTemplateData: function() {             var value = this.model.get(this.fieldName);             return {                 value: value             };         }     });       return TextView; });

Text field view template src/Custom/Bundle/OroBundle/Resources/public/templates/viewer/text-view.html:

JavaScript

<span class="tags-container"> Value: <%- value %> </span>

1 2 3

<span class="tags-container">     Value: <%- value %> </span>

src/Custom/Bundle/OroBundle/Resources/config/requirejs.yml:

YAML

config: paths: 'customoro/js/app/views/text-view': 'bundles/customoro/js/app/views/text-view.js'

1 2 3

config:     paths:         'customoro/js/app/views/text-view': 'bundles/customoro/js/app/views/text-view.js'

[juanParticipant]

Hi Mike these was really helpfully. I only have a problem if de editor is a date type. I can’t figure out how to reformat de return response. it’s rendering a timestamp like these “1541548800000” for example.

[Author]

Replies