I have recently started working on an umbraco 5 project and am finding it a bit of a struggle compared with umbraco 4. What I am trying to do is have a list of items that are managed in the content section of the site where users can add items to a list, this list is then used in drop downs and page categories throughout the site.
I am looking for the best way to do this, I am currently part way through creating a property editor that manages a list of text boxes but not sure if this is the best way of doing it, and Im currently not entirely sure of how to go about doing even this. I can save one property no problem, but a dynamic list?
Can anybody give me some idea of how they would go about doing this with some code examples, theres not a huge amount of resources for 5 out there at the minute.
Many thanks to those who contribute.
UPDATE
I have now copied the multiple textstring property editor from the source code and am looking to update it to have an extra text input. Its using the knockout javascript library of which Im not too familar with, below is the code I have so far, does anyone know how I would update this to save both text values to the database?
<ul class="relatedlinks-textstring-inputs" data-bind="template: { name: 'textstringRow', foreach: textstrings }"></ul>
<script id="textstringRow" type="text/html">
<li style='width: 250px;'>Name<input type="text" data-bind="value: value" />Url<input type="text" data-bind="value: value" /></li>
</script>
#Html.HiddenFor(x => Model.Value, new Dictionary<string, object> { { "data-bind", "value: value" } })
Related
I'm trying to create a carousel and I want it to be configurable from the Experience Editor. By configurable I meant that it's possible to edit the image, text AND add/or remove slides.
The first time I create the carousel I can add/remove slides but no after saving it and opening it again, after rendering the carousel I can't remove just one slide because they all are part of the same placeholder (I can continue adding new slides and removing the new ones but not the old ones).
I have Carousel.cshtml and CarouselSlide.cshtml and the code look like:
Carousel.cshtml
<div class="carousel">
#foreach (Item slide in Model.Item.Children)
{
#Html.Action("CarouselSlide", "MediaFeature", new { model = slide });
}
#Html.Sitecore().DynamicPlaceholder("slides")
</div>
CarouselSlide.cshtml
<div class="carousel-slide">
<div class="carousel-slide-content">
#Html.Sitecore().BeginField(....)
<div class="background-image">
.....
</div>
<div class="text-container">
....
</div>
#Html.Sitecore().EndField()
</div>
</div>
So far, the issue looks like is related with the placeholders. Any ideas about how to render DynamicPlaceholders?
EDIT
"slides" placeholder is configured to allow only CarouselSlide components
Remove the foreach loop. It is unnecessary. When Sitecore renders the placeholder it renders the previously added slides for you. When in edit mode, it also renders the container that allows you to add additional components.
Using a dynamic placeholder as you have will allow you to have multiple Carousel components on a page. Or more precisely, multiple components containing a placeholder with the key "slides". It is most likely not causing the problems you are seeing with your slides.
Update - additional info requested by OP
It looks like what you have done is mix two different styles of development. In one, you are explicitly rendering the children of the carousel item as slides. In the second you are relying on Sitecore's presentation engine to dynamically render components into a placeholder that could be using data sources from somewhere else in the tree. You need to pick one or the other, but the second approach is generally preferred.
To use the second approach, you would simply remove the foreach loop so that your Carousel view looks like this:
<div class="carousel">
#Html.Sitecore().DynamicPlaceholder("slides")
</div>
If you decide to go with the first approach, you would remove the placeholder and then add Custom Experience Buttons to allow you to insert and sort child items under your carousel item.
With either approach, you may find that page editor does not play all that well with your Carousel javascript. The most common workaround to this problem is to render the carousel as a flat list in page editor mode.
How can I access the text "All changes saved" in the dynamically created Ember script below? I use Protractor to create functional test.
<div class="is-muted">
<script id="metamorph-191-start" type="text/x-placeholder"></script>
<script id="metamorph-191-start" type="text/x-placeholder"></script>
All changes saved
<script id="metamorph-191-end" type="text/x-placeholder"></script>
</div>
Thank you in advance for your help!
I ran into a similar issue earlier and solved it in a rather unelegant manner but it does the job, try the following:
//$$('#metamorph-191-start') will select all the elements on your page with ID metamorph-191-start
//.get(1) will get the second element that passes this requirement aka the script with your text 'all changes saved' in it.
//the .getText().then(function(foo)... gets the text from the element and resolves the promise around it.
$$('#metamorph-191-start').get(1).getText().then(function(foo){
console.log(foo);
});
I said this was unelegant since it is quite the bad practice to use the same ID more than once on a single HTML page.
By default, Limesurvey provides the follow text elements for the surveys - Survey title, Description, Welcome message, End message etc, which I can use in my template with tags like {SURVEYNAME}, {SURVEYDESCRIPTION}, {WELCOME} etc.
Is it possible to add my own custom field, which I can then use in the template? I need to do it this way because I need to have the text translatable, and present on every page.
You can not add a custom replacement with the current version of LimeSurvey. And your LimeSurvey version seems outdated. But LS includes jquery, therefore it's easy to move some element from a place to elsewhere.
Quick example:
<p>Here is your description</p>
<div style='display:none'>
<label for='languagechanger' id='labellang'>Here is the new label for language</label>
</div>
<script>
$(function() {
$("#labellang").insertAfter("#languagechanger")
});
</script>
A PHP solution, hacking LimeSurvey code, should be placed at https://github.com/LimeSurvey/LimeSurvey/blob/master/application/helpers/replacements_helper.php#L814
Am I able to load a custom template based on a condition?
eg..
If I was making a booking for a mechanic then the editor form would show textboxes for carmodel, yearmake etc.
If I was making a booking for a carpet cleaner the editor form would show textboxes for howmanyrooms, room sizes etc..
Am I able to pass an ID of a service and show the particular editor form for the correct service?
we can currently display this functionality if we create different scheduler Views but that would then create a duplication of many pages.
I had the exact same problem and after searching a long time and combining what I found, I came to this :
1) above my scheduler I have a kendodropdownlist
<input id="reservationPicker" />
<script>
$("#reservationPicker").kendoDropDownList({
dataTextField: "name",
dataValueField: "reservationDefTypeId",
dataSource: reservationPickerDataSource
});
</script>
2) my event has an extra field reservationDef which will hold the information of the dropdownlist.
3) I can use this information in my template
<script id="editorScheduler" type="text/x-kendo-template">
<center>
<div id="main">
#if(reservationDef=="mechanic"){#
<h3>Mechanic stuff</h3>
#}else if(reservationDef=="carpetCleaner"){#
<h3>Carpet Cleaner stuff</h3>
#}else{#
<h3>unknown type of reservation !</h3>
#: reservationDef #
#}#
</div>
</center>
</script>
4) I use this template in my scheduler
editable: {
template: $("#editorScheduler").html()
},
5) but what with a new appointment ! I use the add event of the scheduler and I fill in this information in the event
add: function (e) {
var reservationTypes = $("#reservationPicker").data("kendoDropDownList");
var selectedReservationType = reservationTypes.dataItem();
e.event.reservationDef = selectedReservationType.appointmentTitle;
},
This does the trick for me. Good luck !
No I didn't but I did find a work around by dynamically adding textboxes on the following page. To b able to choose a view model at runtime for the scheduler didn't seem possible
if anyone knows how to load a particular viewmodel at runtime using mvc would be very intresting for future ideas and development.
Using meteor.js and i am kind of stuck with the structure of template or how to do this trick as clear as possible.
Example of my chating app problem:
chatingWith = DB query for selecting each user i am chating with like on FB // REACTIVE
{{#each chatingWith}}
{{#each this.messages}}
Message1...
Message2...
{{/each}}
<form>
<input class="sendMessage" type="text" />
</form>
{{/each}}
This works exactly as i need but with one big problem... when new message arrive... the content is re-rendered ofc and when i am in this time writing a message the value of will dissapear.
How would you solve this?
Sorry for english and thx for tips!
There is a section in the documents about preserving inputs. http://docs.meteor.com/#template_preserve
From my understanding, as long as you have the package preserve-inputs installed, it should keep the reactive nature of meteor from erasing the input. I would check to see if the preserve-inputs package is installed.