I was wondering if it would be possible to make a condition around a slot, to check if it is configured or not, and then display different markup.
Code example:
<isif condition="${The slot is configured}">
<isslot id="error-page-text-widget" context="folder" description="Error page text widget" context-object="${pdict.Widgets.contextFolder}" />
<iselse>
Other stuff
</isif>
Yes it is possible. You can also display another slot in a specific else condition. One thing to keep in mind is that included template slots aren't picked up by business manager. So you'll need to place them in the including template as well. But you can suppress their output in the including template using an <isif condition="${false}"></isif> wrapped around it.
you can do something like :
<isif condition="${pdict.Widgets.contextFolder != null}">
<isslot id="error-page-text-widget" context="folder" description="Error page text widget" context-object="${pdict.Widgets.contextFolder}" />
</isif>
You can use to check if the the slot is empty like below Code:
<isif condition="${slotcontent != null}">
<isslot id="homepage-online-advantages-slot" description="homepage-online-advantages" context="global"/>
</isif>
Related
I'm trying to allow an author to change the heading size in the markup based on a dropdown in the dialog with the options "h1, h2, h3, h4". If none is selected, it should default to h2.
I'm trying to do this with ternary code like I would for dynamic classes or content, but when I do this it just prints the code out on the page. The result of the following should be <h2> Heading </h2> or have h2 replaced by a dialog selection
<${properties.headingSize ? properties.headingSize : 'h2'}>
${properties.heading}
</${properties.headingSize ? properties.headingSize : 'h2'}>
The result of this code in Inspect Element is
<${properties.headingSize ? properties.headingSize :="h2" }>Heading <!--${properties.headingSize-->
Is this not a recommended way to accomplish dynamic markup? Or is there a way to get the ternary to work correctly?
The recommended way to solve your problem is to make use of the data-sly-element statement to replace your element name. Sample usage is shown below.
<h2 data-sly-element="${properties.headingSize || 'h2'}">${properties.heading}</h2>
For more information on the acceptable values for data-sly-element as well as the available block statements that can be used in HTL, kindly refer this official documentation
I've tried all the HTL context parameters (even 'unsafe'). When I inspect the input, I can see the value intact, but you can't see the value pre-populated in the field. I tried different types of values, different contexts, and different types of input fields. [AEM 6.2]
<input type="email" name="senderEmail" value="${userProfile.email # context='text'}"/>
If the value is rendered in page source and also visible in browser inspector, could it be that it's hidden by some weird CSS? Something like color:transparent
There are many possible causes. I'll pitch in one, to help get you thinking. Is userProfile available via the use api?
I've made this mistake before:
<div data-sly-use.bean="com.beans.Bean">
${bean.value}
</div>
// ... other code
${bean.value}
The "Bean" isn't available later, outside it's host element.
If I understand your question correctly this isn't actually about HTL, but rather about the HTML input element itself. You have an input element with a value attribute set, yet that value is not displaying in the box. If that's correct, then I'd recommend doing some investigation around HTML input value not displaying when set, rather than sightly context issues.
Some possible answer would include css styles hiding the input text or javascript clearing out the values after page load. There are certainly more potential causes, but we'd need to know more about your page to provide a better answer.
To do some of your investigation you can try loading a component with only that input in it and see if that works, that would eliminate any css or js executing elsewhere on the page.
We have a requirement wherein a section of a page will be part authorable and part dynamic. What I mean by this is "You have 6 visits left out of 16." The 6 and 16 in the sentence are coming from a REST service call but the text "You have...visits left out of.." has to be authorable through dialog. Also, we are using AEM 6.
Thanks in advance
Maybe this solution will help others looking for simple placeholder text for their dialog textfields (OP not so much). Use an emptyText attribute...
<dialogText fieldLabel="AEM CLassic UI Text" jcr:primaryType="cq:Widget"
name="./nameOfText" emptyText="THIS IS THE PLACEHOLDER" xtype="textfield"/>
Perhaps you can start by extending foundation/components/text, where the user would be expected to enter a valid formatable string (i.e. "You have %d visits left out of %d").
In your component you would be implementing text.jsp therefore overriding the default behavior of foundation/components/text, in which you can do something like
<cq:text property="text" escapeXml="true"
placeholder="<%= Placeholder.getDefaultPlaceholder(slingRequest, component, null)%>"
tagName="span"
tagClass="myformatedmessage" />
You use tagName and tagClass which will wind up putting the formattable text in a <span class="myformatedmessage">...</span>. Then use jQuery to find it and populate the format placeholders after getting the data via ajax. All that jQuery code you can probably put into a clientlib folder within the same component you extended.
Based on your description, I think you are looking for replacement or substitution instead of placeholders.
"placeholder" generally refers to display text inside a form input that is displayed until the user enters data in the field (such as hint data).
You generally have 3 options for replacing parts of the data:
Server-side (prevents page from being cacheable in dispatcher). Requires parsing authored content & replace some kind of tags with desired REST data, such as "You have ${x} visits left out of ${y} total". Other ways of "tagging" substitution data could look like "You have %x% visits left out of %y%"
client-side JavaScript DOM manipulation once REST data returns. ie $el.html(newDomContentString)
client-side JavaScript templates (handlebars, dust, etc). Takes more initial setup in JS, but generally scales better.
In grails i have a form with g:field tags like:
<g:field name="test" from="0..20"/>
I am trying to find a way how I can access the "from" attribute in my controller.
I can get the "value" attribute by using:
print params.test
I have tried:
print params.test.from
I'm sure there must be a way to do this but I can not seem to find it.
What I am wanting to achieve by this is perform validation so that the value does not go outside the the from range.
I know that this can be added in the domain, but in my situation I need to allow the user to overwrite the range constraints.
Any ideas?
By the time that code hits the browser, it is just HTML. from doesn't exist anymore. If that is being rendered into some sort of client side validation, that's not going to get submitted back to the server in a form submit.
If you explain what you are really needing to do in your question, I can provide a better answer.
You can pass the "from" values as hidden fields.
<g:hiddenField name="min" value="0" />
<g:hiddenField name="max" value="20" />
Something like that.
What's the correct XPath syntax to check if an option element is currently selected, or just to get the selected option element from a select element, on an open page with which the user, and JavaScript, may have interacted? Is this even possible with XPath, or does it lack the ability to look at DOM properties?
I can't find any documentation on this, and have (speculatively) tried:
//option[#selected=true]
//option[#selected="selected"]
//option[#selected]
but none of these work; they simply don't match any elements.
(In case it matters, I've tried this both using the $x function in the Chrome developer console, and using the find_elements_by_xpath method in Selenium for Python.)
Short answer: it's not possible.
Longer answer: XPath can look at HTML attributes, but it can't look at DOM properties. Selecting an <option> element in a <select> changes the selected property of the <option> to true, and also changes the value property of its parent <select> element, but it doesn't affect the attributes of either, so it is invisible to XPath.
To find <option> elements that have the selected attribute set, which is often how a page author might determine which option is initially selected, you can use //option[#selected]. But this does not find the currently selected <option>; changes that the user makes to the selection are invisible to XPath. There's no guarantee it will even find the initially selected option, since it's possible that the page author didn't put the selected attribute on any elements and either let the browser select the first option by default or had some JavaScript select the initial option via the selected property.
The multiple other answers here claiming that a selector like //option[#selected] can detect selection changes made by the user after the page loads are simply completely wrong.
Of course, if you're able to use CSS selectors instead of XPath selectors, then option:checked will do the job.
The problem could be the " (double quotes).
//select/option[#selected='selected'] - Will match the selected option, i am using this successfully.
//select/option[#selected='selected' and #value='specific value'] - Will only match the selected option if it has a 'specific value', i'm also using this.
If you are still having trouble, it could be an entirely different problem, perhaps there is no option node. I hope this helps.
I think we can use a knowledge from #Mark's answer and account that. Let's just find a node which HAS desired attribute:
tree.xpath('//select/option[#selected]/text()')[0].strip()
I tried "//option[#selected=''] and it has worked for me.
it is able to highlight the selected option within Page objects model.
I would try //option[#selected='true']
i.e. driver.findElements(By.xpath("//option[#selected='true']")).getText();