I want to be able to read the value that I have set in the dialog and use it in Sightly to control what section of code is shown. When I have tried using the code below I have been receiving this error "Operands are not of the same type : comparison is supported for numbers only".
I have tried so many different fixes and have found nothing that works nor any documentation for it. Is context = 'number' not the correct syntax or is there anything else I have to add?
IN THE DIALOG
<number
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
fieldLabel="Select Amount of Delivery Options"
name="./number"
value = "4" >
<items jcr:primaryType="nt:unstructured">
<four
jcr:primaryType="nt:unstructured"
text="Four"
value= "4" />
<three
jcr:primaryType="nt:unstructured"
text="Three"
value= "3" />
<two
jcr:primaryType="nt:unstructured"
text="Two"
value= "2" />
<one
jcr:primaryType="nt:unstructured"
text="One"
value= "1" />
</items> </number>
IN THE HTL
<sly data-sly-test="${properties.podnumber # context = 'number' >= 1}">
first, your dialog has name="./number and in your HTL you use properties.podnumber they do not match.
To answer your question: there is no way to do this with sightly alone, the context option is only for rendering (XSS protection) and does not change the value.
Your best bet is to use a sling model, something like
I assume your dialog will have name="podNumber"
#Model(
adaptables = {Resource.class},
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public interface MyModel {
#Inject
int getPodNumber();
}
Sling will then convert that value to an integer you can use in your comparison. so you can add your model with data-sly-use.myModel="package.name.MyModel" then use it:
<sly data-sly-test="${myModel.podNumber >= 1}">
By the way, all the values in your dropdown are larger than or equal to 1.
NOTE: as Florian suggested in the comment below, you should use boolean checks in the model, instead of having to compare values in HTL. for example:
#Model(
adaptables = {Resource.class},
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class MyModel {
#Inject
int podNumber;
boolean isLargerThanOne(){
return podNumber > 1;
}
Related
I am having problems using ternary operators with typescript,
please check the code to understand what I am trying to say.
`
const QuizQuestionContainer = ({ qa }: QuizQuestionContainerPropsType) => {
const { question, option1, option2, option3, option4 ,checked } = qa;
return (
<>
<h4>{question}</h4>
<form>
<input
type="radio"
value={option1}
name="option"
onClick={checkOption}
{checked === option1 ? "defaultChecked": ""}
/>
);
};
export default QuizQuestionContainer;
`
I am receiving a props "qa" and I destructured the value
"checked" from it and I want the input to be checked
by default if the "checked" is equal to the option but
it is throwing an error saying
"'...' expected.ts(1005)"
and
"Spread types may only be created from object types.ts(2698)"
You need to define what prop name you're providing a value for!
{checked === option1 ? "defaultChecked": ""} is a valid boolean value, but you need to assign it to an input prop. Maybe you're looking to do checked={option1 === "defaultChecked"}?
This could be a result of the checked variable having the same name as that input prop -- might be helpful to rename the variable to isChecked to avoid confusion in the future.
If you want to set the prop defaultCheck using the condition you mentioned, change to:
defaultChecked={checked === option1}
I believe what you want to do here is determine if the input is checked
checked accepts a boolean (true = checked)
changed to this:
checked={checked === option1}
I want to allow a user to provide a list of one-word attributes without parameter values. For example,
<container row crosscenter wrap spacearound ...>
which results in something like this in container.html
<div [ngClass]="{ 'flexDisplay': true, 'directionRow': isRow, 'directionCol': isCol, 'contentSpaceAround': isSpaceAround}" ...>
What I'm missing is how to set
#Input('row') isRow = false;
to true if 'row' was present in the container line.
Any ideas?
Thanks in advance.
Yogi
This can be handled in ngOnChanges. The value can be assigned either back to input property or to some object that will be passed to ngClass
ngOnChanges(changes: SimpleChanges) {
if ('foo' in changes) {
this.options.foo = true;
}
}
Since there's no way how inputs can become unassigned, there's no reason to provide bindings for them. #Attribute can be used instead:
constructor(#Attribute('foo') public foo: boolean|null) {
this.foo = (foo != null);
}
Using attributes for regular options isn't a good decision, design-wise. This prevents from setting them dynamically. Instead, it is always preferable to accept options input. If all options are supposed to be flags, it can be a string input that will be split and processed in ngOnChanges, like:
<container options="row crosscenter wrap spacearound">
or
<container [options]="'row crosscenter wrap spacearound'">
I think the answer to my question is to create directives for each of the "one-word" tags (attributes) I want to use.
:-)
I'm new to ASP.NET MVC but I haven't been able to find an explanation for this.
My questions is regarding the difference in the value attribute in the generated HTML when I use #HtmlTextBox() vs. #HtmlTextBoxFor().
I can set the initial value for an <input> using #Html.TextBox() like this:
#Html.TextBox("Phone", "Initial Value", htmlAttributes: new { id = "txt_phone" })
The generated HTML is just what you'd expect:
<input id="txt_phone" name="Phone" type="text" value="Initial Value" />
Please notice the generated value attribute above.
Using #HtmlTextBoxFor() is a different. Please note that I have a very simple model in my view. It has a Phone property which is a String.
Here's an attempt at setting an initial value using #Html.TextBoxFor():
#Html.TextBoxFor(x => x.Phone, htmlAttributes: new { id = "txt_phone", value="Initial Value" })
The generated HTML, however, does not reflect the value attribute:
<input id="txt_phone" name="Phone" type="text" value="" />
My first question is, "why did the generated HTML not reflect the 'Initial Value' text in my value attribute?"
As many of you know, the "right way" to set the initial value with #HtmlTextBoxFor() is like this:
#Html.TextBoxFor(x => x.Phone, htmlAttributes: new { id = "txt_phone", Value = "Initial Value" })
But look at the generated HTML:
<input Value="Initial Value" id="txt_phone" name="Phone" type="text" value="" />
As you can see it generates a Value attribute (with a capital V) yet it still generates a value attribute with a lowercase v and an empty string!.
My second question then, is, why does #Html.TextBoxFor() require a captial V in Value yet still generate a lower-case v, value with an empty string?
Thanks
The answer to "why?" is because this is not the way you're supposed to pass a value. The HTML helpers use a bit of fairly complex logic to determine what the value of a field should be, and because it varies based on a number of different circumstances, your attempt at adding a manual value are largely ignored.
The first place Razor looks for a value is in ModelState, which is composed of the data from Request, ViewData and ViewBag. Then, it looks on the view's Model. Finally, it will fallback to the "default" value, which really only applies with the non-For helpers, where you can specify the value to default to. The reason you can't do the same with the For helpers is because they are bound to an actual property, and therefore, take that property's value, even if it's just the default of null or 0 or something.
Long and short, if you want to bind to a property and have it default to a specific value, then that value needs to be the default for the property. For example:
private string phone;
public string Phone
{
get { return phone ?? "Initial Value"; }
set { phone = value; }
}
Now, the property itself will always return "Initial Value" if it's previously unset, so your form field will as well.
I want to know how to use the attribute rendered in PrimeFaces.
Does this piece of code make any sense:
rendered="#{bean.user 1} and #{bean.user 2}"
The rendered attribute only accepts boolean values. It defines if a component will be created in your page DOM. If you set a component as rendered="false", it will not be visible in your website.
And answering your question: that piece of code only makes sense if user1 and user2 are boolean variables in your bean. Also, don't forget the getters and setters for those variables.
Rendered attribute can only accepts Boolean value, or if you use EL expression, it's expression must evaluate to Boolean value like
#{mBean.isTrue} , #{mBean.valueOne eq 1} , #{mBean.valueOne == 1} , #{mBean.stringValue == 'String'} , etc.
Hope it's help.
I have a widget with validation params such as "min" and "max". I want "min" to be set dynamically, because it depends on value contained in another widget.
<input id="test" type="text"
data-dojo-type="dijit/form/NumberTextBox"
name= "elevation"
required="true"
value="3000"
data-dojo-props="constraints:{min:-20000,max:20000,places:0},
invalidMessage:'Invalid elevation.'" />
How can I do something like min: testWidget.getValue()
Thanks.
All you need to do is use the _WidgetBase#set method. Here is the description from Dojo's API documentation:
Set a property on a widget
Sets named properties on a widget which may potentially be handled by a setter in the widget.
For example, if the widget has properties "foo" and "bar" and a method named _setFooAttr(), calling myWidget.set("foo", "Howdy!") would be equivalent to calling widget._setFooAttr("Howdy!") and myWidget.set("bar", 3) would be equivalent to the statement widget.bar = 3;
set() may also be called with a hash of name/value pairs, ex:
So with your widget reference you can simply do:
var elevationInput = dijit.byId("test");
var constraints = {
min: testWidget.getValue(); // or testWidget.get("value")
max: elevationInput.constraints.max
};
elevationInput.set("constraints", constraints);