<ion-range dual-knobs="true" pin="true" min="0" max="100" step="3" snaps="true"></ion-range>
I want the above code to be looked like shown in image
According to the docs,
Setting the dualKnobs property to true on the range component will
enable two knobs on the range. If the range has two knobs, the value
will be an object containing two properties: lower and upper.
Use ngModel
<ion-range dual-knobs="true" pin="true" min="0" max="100" step="3" [(ngModel)]="knobValues" snaps="true"></ion-range>
In your component:
knobValues:{
upper:100,
lower:50
}
Related
I'm trying use input with datalist in a lightning component and doesn't seem to work. I've looked around and can't seem to find anything that says i can't. So basically,
<input list="acctlist"/>
<datalist id="acctlist">
<option value="somevalue">
</datalist>
does not work. I want to have an input in a form that a user can type but also able to select from a list returned from the controller. Is there a workaround that would be as simple or is this the following route the best i got.
https://developer.salesforce.com/blogs/developer-relations/2015/06/salesforce-lightning-inputlookup-missing-component.html
The list attribute of input tag is not compatible with lightning component.
When you deploy the components, the attribute is removed.
If you want to use input with datalist, you need to add the attribute in Renderer.js.
datalist.cmp
<input aura:id="acctlistInput" />
<datalist id="acctlist">
<option value="somevalue" />
</datalist>
datalistRenderer.js
afterRender : function(component, helper) {
var acctlistInputCmp = component.find("acctlistInput");
var acctlistInput = acctlistInputCmp.getElement();
acctlistInput.setAttribute("list", "acctlist");
return this.superAfterRender();
}
I'm having an issue with a rendering I'm building in Sitecore 8 Update 3, using MVC with Glass Mapper v4.
I have a Feature Promo rendering that has a Rendering Parameter Template Feature Promo Parameters which defines a droplist field named Align with the possible values Left and Right.
When in Experience Editor and Preview mode the rendering renders correctly and when debugging RenderingContext.Current["Parameters"] contains Align=Left or Align=Right accordingly, and Glass maps this correctly to my POCO.
However, when in web mode, the first rendering has Align=Left as its parameter, all subsequent renderings of the same type have Align with no value.
Checking the layout XML in the web database via Sitecore Rocks, I can see the parameters are there correctly:
<r p:p="1" xmlns:p="p" xmlns:s="s">
<d id="{FE5D7FDF-89C0-4D99-9AA3-B5FBD009C9F3}">
<r p:before="r[#uid='{CAE5DB0F-1971-4931-939B-9F7DB14AF0F8}']"
s:ds="{F63266A5-CC62-4915-9D89-CB01C7A0D05A}"
s:id="{6BA52384-D976-499D-8A0D-7F729EB4376B}"
s:par="Align=Left" s:ph="main"
uid="{4CBD0824-D232-46F9-8763-295D3B493A4F}"/>
<r p:before="r[#uid='{12A7C72A-1821-4F8D-9A87-745604BE5106}']"
s:ds="{C50C7579-3680-46C3-93B2-9429EB9E0100}"
s:id="{6BA52384-D976-499D-8A0D-7F729EB4376B}"
s:par="Align=Right" s:ph="main"
uid="{CAE5DB0F-1971-4931-939B-9F7DB14AF0F8}"/>
<r p:before="*[1=2]" uid="{12A7C72A-1821-4F8D-9A87-745604BE5106}"/>
</d>
</r>
No matter what I do, the second (and any subsequent renderings of the same type) doesn't get the specified parameter value.
The code of the rendering is as follows:
#model Promo
#{
var settings = Html.Glass().GetRenderingParameters<FeaturePromoParameters>();
var alignment = "feature-promo-style-a";
if (settings != null && settings.Align.EqualsText("Right")) {
alignment = "feature-promo-style-b";
}
}
<div class="feature-promo #alignment">
<div class="layout layout-a">
<div class="region region-a">
<div class="region-inner">
<div class="feature-promo-image-container">
#Html.Glass().Editable(m => m.Image)
</div>
<div class="block block-size-b feature-promo-text">
#if (Html.Glass().IsInEditingMode || !Model.PreTitle.IsEmptyOrNull()) {
<div class="pre-title">#Html.Glass().Editable(m => m.PreTitle)</div>
}
#if (Html.Glass().IsInEditingMode || !Model.Title.IsEmptyOrNull()) {
<h2 class="h3 color-a">#Html.Glass().Editable(m => m.Title)</h2>
}
#Html.Glass().Editable(m => m.Body)
</div>
</div>
</div>
</div>
</div>
Can anyone advise what I'm doing wrong, or if I've found a random bug?
Update for Marek Musielak:
OK, its now only hitting the breakpoint once -- and has the uid of the first rendering on the page: {4CBD0824-D232-46F9-8763-295D3B493A4F}. Could this turn out to be something dynamic placeholders related?
RenderingContext.CurrentOrNull.Rendering["Parameters"] = "Align=Left"
This appears to be due to caching... oh the shame.
The renderings had Cacheable unchecked, and no other caching settings selected.
I've just updated them to have Cacheable checked and Vary by Parameters checked, re-published and its now working correctly.
I would have thought that having Cacheable off would mean the rendering would not be cached, but apparently not.
Thanks.
Is there a way in Sitecore SPEAK UI (7.5) to configure a ListControl (ViewMode set to DetailList) to contain a column with images, and another column containing buttons?
I've created a ListControl Parameters item beneath my PageSettings item and have added a few ColumnField items for the required columns - but cant find any other template types to add for different types of column data. I've also tried playing around with the Formatter and HTMLTemplate fields of the ColumnFields but am not sure how these are meant to be used.
Considering button means hyperlink. You can try adding the following in the HTMLTemplate:
For Image:
<img src="{{YourImageSourceField}}" ..../>
For Hyperlink:
{{YourLinkTextField}}
You can also consider reading Martina Welander Speak Series for some information on this kind of custom implementations.
I've also used the custom title property of the ListView by setting ViewMode to TileList. Then used Knockout to databind to a custom tile using standard cshtml, if this is any use?
<div class="sc-tile-default" data-bind="attr: {id: Id}">
<div style="min-height: 98px;">
<img width="112" data-bind="attr: {src: Path}" />
</div>
<div class="sc-iconList-item-title">
<span data-bind="text: Name"></span>
</div>
See this project
https://github.com/sobek1985/WallpaperManager
I need to concat several variables to create one attribute, for an example I have a set of RadioButtons which may appear several times on the page - dynamically, first the view can be displayed severl time, other thing is that they are placed in each loop so they can appear several times per view.
So I can't use static name attribute, but I should concat if with several parts, for an exampe result should look like:
<input name="view1_row0" value="0"> No
<input name="view1_row0" value="1"> Yes
<!-- next row in view1 -->
<input name="view1_row1" value="0"> No
<input name="view1_row1" value="1"> Yes
<!-- next row in view2 -->
<input name="view2_row0" value="0"> No
<input name="view2_row0" value="1"> Yes
etc... I can easily get the parent's view's ID and/or index of the loop with view._parentView.contentIndex but I have no idea how to concat them in one binding, the pseudo code would look like this:
{{view Ember.RadioButton nameBinding=view.parentView.elementId + "_row" + view._parentView.contentIndex selectionBinding="someVal" value="0"}}
But it of course throws the error at + sign. Is there any way to resolve that ?
Why not pass them in as separate bindings and the concatenate them in a custom implementation of Ember.RadioButton?
{{view App.MyRadioButton elementIdBinding="view.parentView.elementId" contentIndexBinding="view._parentView.contentIndex" selectionBinding="someVal" value="0"}}
and then in App.MyRadioButton (which extends Ember.RadioButton)
name: function() {
return this.get('elementId') + '_row' + this.get('contentIndex');
}.property('elementId', 'contentIndex')
Alternatively you might also be able to do that in your controller.
In APEX 3.2, I want to be able to run JavaScript validations to check the data entered and display the appropriate message above each row in the tabular form.
I'm not sure how this would work given that it is a tabular form and the user will be able to add/delete rows.
Appreciate any ideas or suggestions.
Thanks.
Okay, doing some javascript validations on tabular forms is a bit complex, and you need to know what you're doing.
First off, you will need to know the ids or names of the elements you wish to check. As you may know, elements in tabular forms are stored in arrays in apex on submit, and are accessed through apex_application.g_f01/g_f02/...
This is reflected in the html code, and the generated elements also have the attribute 'name' set to the column they belong to. The id also holds the column, plus the rowindex. Warning though, this id is only generated like this when the item is created 'implicitly', ie you did not write your query with apex_item calls (apex_item.textbox(...)).
Another but is that only fields of which the state is saved will have an array column defined. An item which you'd only show as 'display only', will not be generated with an input tag, and will just be held as text in a td tag.
All by all, when you know that, the next steps should be straightforward enough. Take a look at the page source, and take a note of the elements you wish to target. For example, i went for the job field.
<tr class="highlight-row">
<td headers="CHECK$01" class="data"><label for="f01_0003" class="hideMeButHearMe">Select Row</label><input type="checkbox" name="f01" value="3" class="row-selector" id="f01_0003" /></td>
<td headers="EMPNO_DISPLAY" class="data">7782</td>
<td headers="ENAME" class="data"><label for="f03_0003" class="hideMeButHearMe">Ename</label><input type="text" name="f03" size="12" maxlength="2000" value="CLARK" id="f03_0003" /></td>
<td headers="JOB" class="data"><label for="f04_0003" class="hideMeButHearMe">Job</label><input type="text" name="f04" size="12" maxlength="2000" value="MANAGER" id="f04_0003" /></td>
<td headers="HIREDATE" class="data"><label for="f05_0003" class="hideMeButHearMe">Hiredate</label><span style="white-space: nowrap;"><input type="text" id="f05_0003" name="f05" maxlength="2000" size="12" value="09-JUN-81" autocomplete="off"></span></td>
<td headers="SAL" class="data">
<label for="f06_0003" class="hideMeButHearMe">Sal</label><input type="text" name="f06" size="16" maxlength="2000" value="2450" id="f06_0003" />
<input type="hidden" name="f02" value="7782" id="f02_0003" />
<input type="hidden" id="fcs_0003" name="fcs" value="19BD045E01D6BA148B4DEF9DDC8B21B7">
<input type="hidden" id="frowid_0003" name="frowid" value="AAuDjIABFAAAACTAAC" />
<input type="hidden" id="fcud_0003" name="fcud" value="U" />
</td>
</tr>
In the javascript section of the page i then added the following 2 functions.
validate_job does the validation of just one field, the element elJob. The validation i used is just very basic, it's up to you to determine just how complex you want it.
If you want to reference other fields in the same row here, you can do several things: extract the rowindex from the id, if you have it. If it doesn't hold the it, get the parent TR, and then use .children("input[name='f##'") to get an input element in the same row. Or if you need the value of an item which does not save state at all, you'll need to get the TR element, and then find the TD which contains the element you need through the headers attribute, which holds the column name.
function validate_job(elJob){
var sJob = $v(elJob).toUpperCase();
$(elJob).val(sJob);
//do your validations for the field job here
if(sJob=="MANAGER"){
$(elJob).css({"border-color":"red"});
alert("invalid value!");
//depends what you want to do now:
//keep the focus on this element? Set a flag an error occured? Store the error?
return false;
} else {
$(elJob).css({"border-color":""});
alert("value ok");
};
};
Call bind_validations onload. If you allow rows to be created, bind a click event to the addrow button and call bind_validations.
function bind_validations(){
//f01 : row selector
//f03 : ename
//f04 : job
//f05 : hiredate
//f06 : sal
//each input element with attribute name with value f04
//blur event is when the user leaves the field, fe tab out, or even click apply changes
//much like how when-validate-item behaved in forms
$("input[name='f04']").blur(function(){validate_job(this);});
};
Just a proper warning though. I've used javascript validations in some apps so far, but i knew they were only going to be used by a small number of people, and then only internally. It was only one field, with some validations. I made the cursor refocus on the field when the validation failed, so they couldn't jump to the next record and change that aswell. Either a valid value was given, or they reloaded the page or canceled the action. Set up like this, they can't press apply changes either, as the blur event would also fire, validating the field.
When your audience is larger, it gets a bit more iffy: what i javascript is disabled? What if they find some way around? Wizzkids?
I still like the immediate feedback it gives, but in a more critical environment i'd also use the server-side validations. To do this, you need a validation of the type "function returning error text". Check out this page for an example, or this one for some usefull tips (at least for pre 4.0!). Also: apex 4.1 really improves a lot on tabular form validations! ;)