1 .. _paragraphhowto: |
1 .. _paragraphhowto: |
2 |
2 |
3 |
3 |
4 How to create a new Paragraph type? |
4 How to create a Paragraph type? |
5 =================================== |
5 =============================== |
6 |
6 |
7 Paragraphs are components or blocs that contain elements/fields and provide one or many renderer methods to compose |
7 Paragraphs are components or blocs that contain elements/fields and provide one or many renderer methods to compose |
8 the front office website |
8 the front office website |
9 |
9 |
10 In this example we will create a contact paragraph to display at the user, who to contact |
10 In this example we will create a contact paragraph to display at the user, who to contact |
158 label_css_class = 'fa fa-fw fa-id-card-o' |
158 label_css_class = 'fa fa-fw fa-id-card-o' |
159 url = 'add-contact-paragraph.html' |
159 url = 'add-contact-paragraph.html' |
160 paragraph_type = CONTACT_PARAGRAPH_TYPE |
160 paragraph_type = CONTACT_PARAGRAPH_TYPE |
161 |
161 |
162 |
162 |
|
163 |
163 3) Create Edit form |
164 3) Create Edit form |
164 ------------------- |
165 ------------------- |
165 |
|
166 - *HTML* |
|
167 |
|
168 .. code-block:: python |
|
169 |
|
170 @pagelet_config(name='properties.html', context=IContactParagraph, layer=IPyAMSLayer, |
|
171 permission=MANAGE_CONTENT_PERMISSION) |
|
172 class ContactPhoneParagraphPropertiesEditForm(BaseParagraphPropertiesEditForm): |
|
173 """Contact phone paragraph properties edit form""" |
|
174 |
|
175 prefix = 'contact_properties.' |
|
176 |
|
177 legend = _("Edit contact card properties") |
|
178 icon_css_class = 'fa fa-fw fa-id-card-o' |
|
179 |
|
180 fields = field.Fields(IContactParagraph).omit('__parent__', '__name__', 'visible') |
|
181 fields['renderer'].widgetFactory = RendererFieldWidget |
|
182 |
|
183 ajax_handler = 'properties.json' |
|
184 edit_permission = MANAGE_CONTENT_PERMISSION |
|
185 |
|
186 |
|
187 - *JSON* |
|
188 |
|
189 .. code-block:: python |
|
190 |
|
191 @view_config(name='properties.json', context=IContactPhoneParagraph, request_type=IPyAMSLayer, |
|
192 permission=MANAGE_CONTENT_PERMISSION, renderer='json', xhr=True) |
|
193 class ContactPhoneParagraphPropertiesAJAXEditForm(BaseParagraphAJAXEditForm, ContactParagraphPropertiesEditForm): |
|
194 """Contact phone paragraph properties edit form, JSON renderer""" |
|
195 |
|
196 |
|
197 4) Create ZMI Edit form inner tab |
|
198 --------------------------------- |
|
199 |
166 |
200 .. code-block:: python |
167 .. code-block:: python |
201 |
168 |
202 @adapter_config(context=(IContactPhoneParagraph, IPyAMSLayer), provides=IParagraphInnerEditor) |
169 @adapter_config(context=(IContactPhoneParagraph, IPyAMSLayer), provides=IParagraphInnerEditor) |
203 @implementer(IInnerForm) |
170 @implementer(IInnerForm) |
235 ITransactionManager(self.context).get().commit() |
202 ITransactionManager(self.context).get().commit() |
236 output.setdefault('events', []).append(get_json_form_refresh_event(self.context, self.request, |
203 output.setdefault('events', []).append(get_json_form_refresh_event(self.context, self.request, |
237 ContactParagraphInnerEditForm)) |
204 ContactParagraphInnerEditForm)) |
238 return output |
205 return output |
239 |
206 |
|
207 |
|
208 4) Create an Edit modal form |
|
209 ----------------------------- |
|
210 |
|
211 This form is used inside modals popup |
|
212 |
|
213 |
|
214 - *HTML* |
|
215 |
|
216 .. code-block:: python |
|
217 |
|
218 @pagelet_config(name='properties.html', context=IContactParagraph, layer=IPyAMSLayer, |
|
219 permission=MANAGE_CONTENT_PERMISSION) |
|
220 class ContactPhoneParagraphPropertiesEditForm(BaseParagraphPropertiesEditForm): |
|
221 """Contact phone paragraph properties edit form""" |
|
222 |
|
223 prefix = 'contact_properties.' |
|
224 |
|
225 legend = _("Edit contact card properties") |
|
226 icon_css_class = 'fa fa-fw fa-id-card-o' |
|
227 |
|
228 fields = field.Fields(IContactParagraph).omit('__parent__', '__name__', 'visible') |
|
229 fields['renderer'].widgetFactory = RendererFieldWidget |
|
230 |
|
231 ajax_handler = 'properties.json' |
|
232 edit_permission = MANAGE_CONTENT_PERMISSION |
|
233 |
|
234 |
|
235 - *JSON* |
|
236 |
|
237 .. code-block:: python |
|
238 |
|
239 @view_config(name='properties.json', context=IContactPhoneParagraph, request_type=IPyAMSLayer, |
|
240 permission=MANAGE_CONTENT_PERMISSION, renderer='json', xhr=True) |
|
241 class ContactPhoneParagraphPropertiesAJAXEditForm(BaseParagraphAJAXEditForm, ContactParagraphPropertiesEditForm): |
|
242 """Contact phone paragraph properties edit form, JSON renderer""" |
|
243 |
|
244 |
240 .. note:: |
245 .. note:: |
241 |
246 |
242 Select the new content block types in ZMI to make it available in tools |
247 Select the new content block types in ZMI to make it available in tools |
243 |
248 |
244 .. image:: _static/select_paragraph.png |
249 .. image:: _static/select_paragraph.png |