I have a little problem.
There is some component, which must render the form for editing model's record. And I need render it on listing page below each model's record.
There is a gist: https://gist.github.com/mxgoncharov/9f1b4cd52cac9173fd46
Problem: When I open it, all fields without select-tags are filled. If render e.g. groupId or another SELECT-tag's value as label it shows right (e.g. '6'). But select-tag doesn't show selected value, and all select-tags shows only prompt.
How can I redraw or refill select-tags? Maybe I did smth wrong?
Related
I am trying to make a NameValueList collection editable with GlassMapper and I don't seem to be able to get to the bottom of this.
We have a list of validations that can be attached to a field and I would like to have the validation message editable in ExperienceEditor.
The collection is pre-processed when GlassMapper is retrieving the item:
Validations = glassItem.GetValidations();
#foreach(Validation validation in Model.Validations)
{
<div id="#validation.Identifier" ng-message="#validation.AngularKey" ng-cloak class="mtg-validation-msg">
#Html.Glass().Editable(validation, e => e.ErrorMessage)
</div>
}
Error that I am getting:
Failed item resolve - You cannot save a class that does not contain a property that represents the item ID. Ensure that at least one property has been marked to contain the Sitecore ID. Type: MyAssembly.Models.Validation
It is not possible to directly edit certain types of complex fields in the Experience Editor, such as Treelist, Multilist or Name Value Collection.
Instead, you should set up and use an Edit Frame. This will pop up a modal dialog allowing you to edit the field, it is not inline but means you do not need to leave the Experience Editor. This is the recommended approach to this problem.
Since you are using Glass Mapper, since version 4 you can declare Edit Frames all directly from code and now have to declare/set them up in the Core database first.
#if (Sitecore.Context.PageMode.IsExperienceEditor)
{
using (Html.Glass().BeginEditFrame(Model, "Edit", x => x.Validations))
{
<div>Edit Validations</div>
}
}
You might be interested in this blog post I wrote about adding a wrapper around the Edit Frame to make the UX more friendly.
Where in sitecore do I configure what fields are displayed when I click this button? (Currently, it lists 3 of the 7 fields that are on the template, I'd like to add another to be editable).
Screenshot
It is one of Edit Frame buttons. When you open your control markup, you see something like this:
<sc:EditFrame ID="editFrame" runat="server" Buttons="/sitecore/content/Applications/WebEdit/Edit Frame Buttons/Default">
...
</sc:EditFrame>
It differs for MVC, but is similar. You need to get Buttons attribute value.
When you open /sitecore/content/Applications/WebEdit/Edit Frame Buttons/Default path in core database you see list of children. It is your buttons. For your case it should be only one button: Edit Item. This item has Fields field where using pipe as delimiter is list of fields that are available for editing.
I want to achieve the following in a django form, for a models.ImageField:
do not show the standard <input type="file"> button ("choose file" button)
show a preview of the current image, for already populated models
for empty (new) models, show a custom button
clicking on the image preview or the custom button will open a file dialog to select the image from the user's file system
selecting a new image replaces the custom button or the old image preview with the preview of the new image
This seems to me like a normal workflow to select images in a form, but I do not seem to find any fully working solution. All I can find involves hacking around several parts:
styling the label and hiding the standard "choose file" button: https://www.youtube.com/watch?v=4p2gTDZKS9Y
use a widget instead of the standard for forms.FileField.
I have tried to use:
class ImagePreviewWidget(Widget):
def render(self, name, value, attrs=None):
return mark_safe('<img src="/media/%s" width="100px"/>' % escape(value))
For the widget, and I am using this in the form like this:
class DesignCampaignForm(ModelForm):
brand_logo = FileField(widget=ImagePreviewWidget)
This is properly showing the preview of the existing image, but I am unable to click on it to select another file, and even if I was that would not update the preview.
Is there an already available solution for this simple use case?
I haven't been able to find a complete solution, so I have done the following:
use a widget to render a modified ClearableFileInput, rendering an image and an <input> element
style the <input> in the element with CSS, to hide it
make sure that clicking in the image triggers the hidden <input> element, wrapping the <img> in a <label> and using the for attribute
add some javascript to replace the image preview whenever the selection in the <input> element changes
whenever the selection is cleared, show the original preview
A gist can be found here.
In my final solution (not yet in the gist), I have added a button for when the image is not yet selected.
edit: Gist only works for Django before version 1.11.x.
class ClearableFileInput has since been gutted and changed
What is the correct way to render sub routes while at the parent route? Basically what I'm trying to do is create a table of resources from the parent route but then make the rows "editable" while at their specific sub-route. Examples:
/foos = table of all foo's but each row is a render of /foos/#
/foos/1 = same table of /foos but the specific row is now form fields for editing
/foos/new = row with blank form fields for a new foo (not part of the question, explain below)
The idea is that only one row is "editable" at a time. So if a user navigates from /foos/new to /foos/3 then the "new" row goes away and the foo # 3 is now editable. Similar when navigating between specific /foos/#
Bonus points: What is the best way for the /foos/# route to know if it is active, so the template knows to either display the read-only foo details or form fields for editing.
At this point I have (what I think is) mostly setup for this scenario but am stuck at the rendering sub routes. I have a jsbin setup: http://jsbin.com/jayax/6/
I want to change how the form looks like and the labels on the fields of the form.
Login in as Admin and then, under the Plugins area in the sidebar, click Editor. There's a dropdown menu labeled "Select plugin to edit". Click that and select "MailChimp" and then click the "Select" button. The sidebar widget form is called mailchimp/mailchimp_widget.php
The form's code begins right after the first PHP block.
You can also edit the code directly by looking in the wordpress/wp-content/plugins/mailchimp/ directory. The translations are in the po sub-directory.
The trick with this template is that the fields are loaded from elsewhere. In order to change the label, you have to set the option of the fields in the PHP code. Each field is looped through and printed out automatically.
For example to change the "Email Address" label to read "Email" add the following code at the end of the first PHP block:
$mv[0]['name'] = 'Email';
This assumes that the first field that will be printed out is the Email Address field. You can do a var_dump to see what other options are available.
If you want to make more drastic changes to the form, remember that when the widget is updated, you'll have to make the changes again and merge them with the updated version.