The asp:menu that I am using is rendering an old table layout. Can someone help me create an unordered list with a nested unordered list for the hover menu. I need the output to render like this:
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link
<ul>
<li></li>
</ul>
</li>
</ul>
XML Data feed looks like this:
<SiteMap>
<item Text="(!menu.Home!)" NavigateUrl="default.aspx" LookId="VertTopItemLook"/>
<item Text="(!menu.Categories!)" LookId="VertTopItemLook" />
<item Text="(!menu.Sections!)" LookId="VertTopItemLook" />
<item Text="(!menu.Manufacturers!)" LookId="VertTopItemLook" />
<item Text="(!menu.CustomerService!)" NavigateUrl="t-service.aspx" LookId="VertTopItemLook">
<MenuItem Text="(!menu.YourAccount!)" NavigateUrl="account.aspx" />
<MenuItem Text="(!menu.OrderHistory!)" NavigateUrl="account.aspx" />
<MenuItem Text="(!menu.FAQs!)" NavigateUrl="t-faq.aspx" />
<MenuItem Text="(!menu.PolicyReturns!)" NavigateUrl="t-returns.aspx" />
<MenuItem Text="(!menu.Shipping!)" NavigateUrl="t-shipping.aspx" />
<MenuItem Text="(!menu.Contact!)" NavigateUrl="t-contact.aspx" />
<MenuItem Text="(!menu.PolicyPrivacy!)" NavigateUrl="t-privacy.aspx" />
<MenuItem Text="(!menu.PolicySecurity!)" NavigateUrl="t-security.aspx" />
</item>
</SiteMap>
Related
I have pre-formatted HTML content (from third Party) that I need to display in Ionic. For example, I have list of questions (pre-formatted html) that I get from DB which I need to display as a list of Ion-Items or Ion-Card in Ionic.
Sample HTML Content from DB:
First Record:
<p>
<span style="color: #eb4924;"><strong>SOME_TEXT_HEADER 1</strong></span><br />
TEXT_DESCRIPTION 1<br />
<span style="color: #339966;"><strong>SOME_COMMENTS_HEADER:</strong></span><br />
SOME_COMMENT_TEXT_1<br />
SOME_COMMENT_TEXT_2<br />
<img src="https://xyx.com/SOME_IMAGE.jpg" alt="ALT_TEXT" width="320" height="116"/>
SOME_COMMENT_TEXT_3<br />
</p>
Second Record
<p>
<span style="color: #eb4924;"><strong>SOME_TEXT_HEADER 2</strong></span><br />
TEXT_DESCRIPTION 2<br />
<span style="color: #339966;"><strong>SOME_COMMENTS_HEADER:</strong></span><br />
SOME_COMMENT_TEXT_1<br />
SOME_COMMENT_TEXT_2<br />
<img src="https://xyx.com/SOME_IMAGE.jpg" alt="ALT_TEXT" width="320" height="116"/>
SOME_COMMENT_TEXT_3<br />
</p>
Third Record:
<p>
<span style="color: #eb4924;"><strong>SOME_TEXT_HEADER 3</strong></span><br />
TEXT_DESCRIPTION 3<br />
<span style="color: #339966;"><strong>SOME_COMMENTS_HEADER:</strong></span><br />
SOME_COMMENT_TEXT_1<br />
SOME_COMMENT_TEXT_2<br />
<img src="https://xyx.com/SOME_IMAGE.jpg" alt="ALT_TEXT" width="320" height="116"/>
SOME_COMMENT_TEXT_3<br />
</p>
...and so on
I want to get suggestions regarding best practices to handle this scenario. Any help would be highly appreciated. Thanks!
You can DomSanitizer from Angular, to display your html.
Html :
<div class="details" [innerHtml]="details">
</div>
</ion-content>
And in your ts :
displayHTML(data){
this.details = this.sanitizer.bypassSecurityTrustHtml(data);
});
Don't forget to declare in the constructor :
public sanitizer: DomSanitizer
I have created the following XML for our Word CustomUI:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
<ribbon>
<tabs>
<tab idMso="TabHome">
<group idMso="GroupFont" visible="false" />
<group idMso="GroupParagraph" visible="false" />
<group idMso="GroupInsertTables" insertBeforeMso="GroupStyles" />
<group id="CustGrp1" label="Next" insertBeforeMso="GroupStyles">
<toggleButton idMso="AlignLeft" showLabel="false" />
<toggleButton idMso="AlignCenter" showLabel="false" />
<toggleButton idMso="AlignRight" showLabel="false" />
<button idMso="IndentDecreaseWord" showLabel="false" />
<button idMso="IndentIncreaseWord" showLabel="false" />
<gallery idMso="MultilevelListGallery" showLabel="false" />
<gallery idMso="FontColorPicker" showLabel="false" />
<gallery idMso="ShadingColorPicker" showLabel="false" />
<toggleButton idMso="Superscript" showLabel="false" />
<button idMso="SpellingAndGrammar" showLabel="false" />
<splitButton idMso="TableBordersMenu" showLabel="false" />
<button idMso="SymbolsDialog" showLabel="false" />
<button idMso="HyperlinkInsert" showLabel="true" />
<gallery idMso="AutoTextGallery" showLabel="true" />
<button idMso="BookmarkInsert" showLabel="true" />
<button id="ReferenceInsert" label="Referentie" imageMso="CrossReferenceInsert" onAction="modCode.ButtonOnAction" />
<button idMso="ReviewNewComment" showLabel="false" />
<toggleButton idMso="ParagraphMarks" showLabel="false" />
</group>
</tab>
</tabs>
</ribbon>
The HyperlinkInsert button is not visible. Does anybody know what I am doing wrong?
screenshot CustomUI
In the customUI tool I created the following XML:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
<ribbon>
<tabs>
<tab idMso="TabHome">
<group idMso="GroupFont" visible="false" />
<group idMso="GroupParagraph" visible="false" />
<group id="CustGrp1" label="MyGroup" insertBeforeMso="GroupStyles">
<button idMso="TableInsertDialogWord" showLabel="false" />
<button idMso="ConvertTextToTable" showLabel="false" />
<button idMso="SpellingAndGrammar" showLabel="false" />
<button idMso="AlignLeft" showLabel="false" />
<button idMso="AlignCenter" showLabel="false" />
<button idMso="Superscript" showLabel="false" />
<button idMso="HyperlinkInsert" showLabel="false" />
<button idMso="BookmarkInsert" showLabel="false" />
<button idMso="AutoTextInsert" showLabel="false" />
<button idMso="ReviewNewComment" showLabel="false" />
<button idMso="SymbolsDialog" showLabel="false" />
<button idMso="ParagraphMarks" showLabel="false" />
</group>
</tab>
</tabs>
</ribbon>
</customUI>
I hide two groups and add one custom group. In this custom group I add only standard buttons using the proper idMSO (downloaded from MS). In Word I can only see five of the twelve buttons. What's wrong here? Are my id's incorrect?
<window apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.test.labelTest')">
<template <!--model = "#bind(vm.allLabelSets)" some thing like this --> >
<label value="#load(each.label1)" />
<label value="#load(each.label2)" />
<label value="#load(each.label3)" />
</template>
</window>
how can we use template to iterate over a list without using any of gridModel,treeModel ?
Try this below code
<vlayout id="vlayout" children="#bind(vm.allLabelSets) #template('record')">
<template name="record" var="record">
<vlayout style="padding-left:10px; border:2px solid green;" >
<label value="#load(each.label1)" />
<label value="#load(each.label2)" />
<label value="#load(each.label3)" />
</vlayout>
</template>
</vlayout>
You have to use children attribute
In order to replace the default Spring security login form I came up with this solution:
<form name="f" action="../j_spring_security_check" method="POST" >
<h:panelGrid columns="2">
<h:outputText value="Username" />
<h:inputText id="j_username" />
<h:outputText value="Password" />
<h:inputText id="j_password" />
</h:panelGrid>
<h:commandButton value="Login" />
</form>
But instead of plain <form> tag I would like to use <h:form> since Primefaces components only work within <h:form>. Using <h:form> the form action will be set automatically by JSF to the current page, not to the value set by me in the example above. Where to I have to code the action "../j_spring_security_check" now? I tried putting it into the <h:commandButton> as follows but that doesn't work:
<h:form name="f">
<h:panelGrid columns="2">
<h:outputText value="Username" />
<h:inputText id="j_username" />
<h:outputText value="Password" />
<h:inputText id="j_password" />
</h:panelGrid>
<h:commandButton value="Click here" action="../j_spring_security_check" />
</form>
It leads to the error message Unable to find matching navigation case with from-view-id '/login.xhtml' for action '../j_spring_security_check' with outcome '../j_spring_security_check'.
Is it the only way to define a navigation case in faces-config.xml? I want to avoid using a bean for this simple use case.
The best solution for me is to use the default <button> tag instead. Since typical button styling is not being applied (in my case I am using Primefaces), I set it manually. Here's the whole result:
<h:outputStylesheet library="primefaces" name="jquery/ui/jquery-ui.css" />
<h:outputStylesheet library="css" name="login.css" />
<div class="message">
<c:if test="#{param.error == 1 and SPRING_SECURITY_LAST_EXCEPTION != null}">
<span class="error">#{SPRING_SECURITY_LAST_EXCEPTION.message}</span>
</c:if>
</div>
<div class="login">
<form action="../j_spring_security_check" method="post">
<h:panelGrid columns="2">
<h:outputText value="Username" />
<h:inputText id="j_username" />
<h:outputText value="Password" />
<h:inputSecret id="j_password" />
</h:panelGrid>
<div class="submit">
<button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
<span class="ui-button-text">Login</span>
</button>
</div>
</form>
</div>
<h:form id="login" prependId="false" onsubmit="document.getElementById('login').action='j_security_check';">
Your action attribute should be an EL expression like follows:
action="#{managedBean.method}"
Your best chance is to use the onclick property of the button. This is an example with a primefaces commandButton, but it will also work for jsf components because it uses the (native) javascript onclick function.
<h:form>
<p:commandButton value="Submit" onclick="alert('JS!')" actionListener="#{tweetBean.addTweet()}" update=":tabView,:trends,:tweetsnr" />
</h:form>