Is it possible to add a teaser image to the default Composite.News package? Out of the box the news ext. brings all I need but a teaser image for the list view is missing in my case.
Yes, but this require modifications with package.
Edit News data type: go to Data -> Page Datafolders -> locate Composite.News.NewsItem -> right click -> Edit -> on the Fields tab add new field for example named "TeaserImage", Field Type = Data Reference, Reference Type = C1 Image File, Optional = Yes -> Save data type.
Modify the News Form Markup:
The News data item contains custom Form Markup, so the new added field will be not automatically appear there, so you should manually add the markup for the new field: go to Data -> Page Datafolders -> locate Composite.News.NewsItem -> right click -> Edit Form Markup -> add markup for the new TeaserImage field:
<cms:binding name="TeaserImage" type="System.String" optional="true" />
</cms:bindings>
<cms:layout>
<cms:layout.label>
<cms:read source="Title" />
</cms:layout.label>
<TabPanels>
<PlaceHolder Label="Settings">
<FieldGroup>
...
<TextArea Label="Teaser" Help="The short description of the news item">
<TextArea.Text>
<cms:bind source="Teaser" />
</TextArea.Text>
</TextArea>
<DataReferenceTreeSelector Label="TeaserImage" Help="" Handle="Composite.Management.ImageSelectorDialog" SearchToken="Composite.Plugins.Elements.ElementProviders.MediaFileProviderElementProvider.MediaFileSearchToken,Composite|MimeTypes=',\ \'image/gif\',\ \'image/jpeg\',\ \'image/png\',\ \'image/bmp\'', Extensions=null, Folder=null, HideSubfolders='False', Keyword=null" DataType="Composite.Data.Types.IImageFile,Composite" NullValueAllowed="true">
<DataReferenceTreeSelector.Selected>
<cms:bind source="TeaserImage" />
</DataReferenceTreeSelector.Selected>
</DataReferenceTreeSelector>
</FieldGroup>
</PlaceHolder>
<XhtmlEditor Label="News Story" Help="News Story" ClassConfigurationName="common">
...
</XhtmlEditor>
</TabPanels>
</cms:layout>
Modify the XSLT function Composite.News.NewsList -> edit the function call "GetNewsItemXml" -> modify Selected fields (select the new TeaserImage field), -> edit function Template and add the code where you want to render the Tease Image.
Related
I would like to have a File Download control display the attachments with the newest (latest) Created On date at the top. The default is to display the newest last.
<xp:fileDownload rows="30" id="FD"
displayLastModified="false" value="#{document1.files}"
style="width:98%" hideWhen="false"
displayType="true" allowDelete="false" displayCreated="true">
</xp:fileDownload>
As there's currently no better answer, I'll post one here.
Actually, the <xp:fileDownload> component lists file attachments in order they appear in document's Rich Text field, not the newest last:
You can't change this behavior with any of the properties, so the one possible way is to obtain the list of attachments, sort it like you need, and then feed the sorted list to <xp:repeat> component, where you can draw the attachment table that will just slightly or even not differ from that displayed by <xp:fileDownload>. It's not that hard, just look at created HTML markup in your browser debug tool and recreate that inside your <xp:repeat>.
Suppose you have dominoData declared on your page:
<xp:this.data>
<xp:dominoDocument var="document1"
documentId="9CAA72D47AEA7C8D462582FB005AB525"
action="openDocument" />
</xp:this.data>
Then create the <xp:panel> where your <xp:repeat> will reside. Create the dataContext for your panel:
<xp:panel>
<xp:this.dataContexts>
<xp:dataContext var="attachments">
<xp:this.value><![CDATA[
#{javascript:
var sourceList:java.util.List = document1.getAttachmentList('files');
if (sourceList.size() == 0) {
return sourceList;
}
java.util.Collections.sort(sourceList, createdComparator);
return sourceList;
}
]]></xp:this.value>
</xp:dataContext>
</xp:this.dataContexts>
</xp:panel>
There you get a list of com.ibm.xsp.model.domino.wrapped.DominoDocument.AttachmentValueHolder objects, then sort the list with declared Comparator (see update below) using the created file attribute, and return the sorted list as attachments variable.
Then you create <xp:repeat> and nest it inside your <xp:panel> after <xp:dataContexts>. Give it the dataContext's variable name as a value:
<xp:repeat value="#{attachments}" var="attachment">
<xp:text value="#{attachment.type}" />
<xp:label value=" - " />
<xp:text>
<xp:this.value><![CDATA[
#{javascript:
var rawSize = attachment.getLength();
return (rawSize < 1024 ? 1 : (rawSize / 1024).toFixed(0)) + " KB";
}
]]></xp:this.value>
</xp:text>
<xp:label value = " - " />
<xp:link text="#{attachment.name}" value="#{attachment.href}" />
<xp:label value = " - " />
<xp:text>
<xp:this.value>
#{javascript:
return new java.util.Date(attachment.getCreated());
}
</xp:this.value>
<xp:this.converter>
<xp:convertDateTime type="both" timeStyle="short" />
</xp:this.converter>
</xp:text>
<xp:br />
</xp:repeat>
Here's the result of <xp:repeat> output compared to <xp:fileDownload>:
Just create the markup that looks like fileDownload's table, and you're done.
Update
It's worth the effort to create a request scoped Managed Bean that will serve as the Comparator instead of implementing some good sorting algorithm right inside SSJS code block.
Create a Java class inside Code/Java folder under some existing or new package. If the package name is e.g. com.benway.util and the class name is CreatedComparator:
package com.benway.util;
import java.util.Comparator;
import com.ibm.xsp.model.FileRowData;
public class CreatedComparator implements Comparator<FileRowData> {
public int compare(FileRowData file1, FileRowData file2) {
if (file1 == null || file2 == null) return 0;
return (int)(file2.getCreated() - file1.getCreated());
}
}
Register your new class as a managed bean in your faces-config.xml:
<?xml version="1.0" encoding="UTF-8"?>
<faces-config>
<managed-bean>
<managed-bean-name>createdComparator</managed-bean-name>
<managed-bean-class>
com.benway.util.CreatedComparator
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
...etc...
</faces-config>
Now you're really done :)
I have implemented react-select to allow entering tags based on auto-complete suggestions and/or inserting new ones.
My implementation is as follows:
import Select from 'react-select';
...
<Select.AsyncCreatable
className='add-tags'
clearable={!!selectionTags}
placeholder={'add more'}
name="form-field-name"
value={selectionTags}
onChange={setSelectionTags}
loadOptions={loadOptions}
promptTextCreator={(label)=>`add new tag: ${label}`}
inputProps={inputProps}
multi
/>
When selectionTags is the list of tags that have already been selected, setSelectionTags is a function that adds a new selected item to that list, and loadOptions holds the list of autocomplete suggestions.
Problem is that if I type "ta" and I have "tag1" as one of the available completions, then choosing it will empty the list of suggestions but leave the "add new tag: ta" entry displayed.
Any idea why it's not being removed as well?
Thanks!
Following this thread on React-Select github:
https://github.com/JedWatson/react-select/issues/1663
I ended up working round it by adding the following options:
ref={s => (selectRef = s)} // store a reference to the select instance
onChange={tags => {
selectRef.select.closeMenu(); // close the entire menu
selectRef.select.setState({
isFocused: false, // remove focus from new tag option
});
setSelectionTags(tags); // call the add tags method with the new set of tags
}}
I am really stuck in testing an extJS web based application which contains many drop down combo boxes. and each box have the same class name and ids are dynamically changing each time the page gets loaded.
The combo boxes is not a typical drop down box. It contains a text box, followed by drop down button image and then clicking on that drop down button providese all the options in the drop down box. I want to select a particular element from the drop down box .
When inspect the drop down button element using firepath, its html code is
<div id="ext-gen1103" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-first" role="button"/>
similarly if i inpsect the drop down text box (whose id alone is constant and does not change)the html code is
<input id="NSClientCombo-inputEl" class="x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus" type="text" placeholder="Select One" name="NSClientCombo" autocomplete="off" aria-invalid="false" data-errorqtip="" style="width: 100%; height: 28px;"/>
and if i inspect any of the drop down elements the html code for that is
<div id="boundlist-1048-listEl" class="x-boundlist-list-ct x-unselectable" style="overflow: auto; height: 187px;">
<ul class="x-list-plain">
<li class="x-boundlist-item" unselectable="on" role="option">****HELP NG****</li>
<li class="x-boundlist-item" unselectable="on" role="option">ABC Inc.</li>
I want to choose "HELP NG" or ""ABC Inc"" from drop down box. But i am really struck how to integrate and how to write selenium webdriver code to choose an element from drop down box since the drop down button contains only id and class (id keeps changing and class name for all the other drop down buttons are same). Have anyone crossed across such scenerios and please help me in sorting out this issue since this is taking away the time totally.:(
You need to use Ext.getCmp() function to retrieve a webElement of this combo.
see the code below.
This code will return the web Element
public static IWebElement ExtJsGetWebElementById(this IWebDriver driver, string id)
{
IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
var script = "return Ext.getCmp('" + id + "').el.dom";
var Element = js.ExecuteScript(script) as IWebElement;
return Element;
}
The next function will be used to open the combo box and set a particular value to it using keyboard shortcuts.
public static void ExtJsSetComboValueWithKeyBoard(this IWebDriver driver, string comboId, string valueToSet)
{
var element = driver.ExtJsGetWebElementById(comboId);
element.SendKeys(Keys.Down);
Thread.Sleep(3000);
element.SendKeys(valueToSet);
Thread.Sleep(3000);
element.SendKeys(Keys.Enter);
Thread.Sleep(3000);
}
to Use the above method, use it like this in your test case.
_webDriver.ExtJsSetComboValueWithKeyBoard("NSClientCombo","ABC Inc.");
I have a file download control that lists attachments from some documents in my database.
I want to display an icon next to each row and make it a link to the attachment of the row.
If not sure how to do it for each row, let's assume that i have only 1 row. How can i get the link of the attachment so as to declare it as href in a link control?
As i already mentioned in my Comment if you are using a <xp:fileDownload> you can add a Icon if you set displayType="true" and because you didnt add code to your question i guess your code could look something like this:
//..your code
<xp:panel id="row">
<xp:this.data>
<xp:dominoDocument
var="document1"
action="openDocument"
documentId="#{javascript://example... viewEntry.getDocument().getUniversalId()}">
</xp:dominoDocument>
</xp:this.data>
<xp:fileDownload
rows="30"
id="fileDownload1"
displayLastModified="false"
value="#{document1.Body}"
displayType="true">
</xp:fileDownload>
</xp:panel>
//..your code
or if you dont use a <xp:fileDownload> and maby just Display rows with the attachment Name you could use something like this:
//... your code
<xp:panel id="row">
<xp:repeat
id="repeat1"
rows="30"
value="#{javascript:#AttachmentNames()}"
indexVar="attachmentIndex"
var="attachment">
<xp:link
escape="true"
text="#{javascript:attachment;}"
id="link1"
target="_blank">
<xp:this.value><![CDATA[#{javascript:
var url = facesContext.getExternalContext().getRequest().getContextPath() + "/0/" +
/*in my case: viewEntry.getDocument().getUniversalID()*/
+ "/$File/"+ AttachmentName;
return url;}]]></xp:this.value>
<xp:image id="image1">
<xp:this.url><![CDATA[#{javascript://
var pdfImage = 'pdf.gif';
if(attachment.indexOf("pdf")> 0)
return pdfImage;
}]]></xp:this.url>
</xp:image>
</xp:link>
<br></br>
</xp:repeat>
</xp:panel>//...your code
The <xp:repeat> inside your row will create a link for each attachment inside of your document you can remove it if you only have one attachment per document.
I want to add new fields or propierties to an calendar event. How can I do it?
Thanks!
You need to
add new section to lightbox form
http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:details_form
for new section of lightbox, set map_to value as name of new field
on server side add extra field to the list of fields in render command
This is how you would create a simple href link inside an event:
1) Go to the Event Configuration Console and create a custom field, under the section that says 'CUSTOM FIELD'. Give the field a name. In this example, call it 'url'. Select its type as 'TextArea'.
2) Create another custom field, call it 'link_title'.Also a 'TextArea'. Description is optional.
SAVE
3) Go to the 'Templates' section of the event console. Under the first section (... scheduler.templates.event_text=function(start,end,event){... ) where you can input text, put ->
return "<b> "+event.text+"</b><br><br>" + event.link_title + "";
SAVE
When you go to create your event from the main calendar, you will see extra fields. Type in them, save your event, and voila. Toot Sweet.
What do you mean by calendar event?
Is it adding a new event?, then it must be done using lightbox(built-in option)
scheduler.config.lightbox.sections=[
{ name:"description", height:50, map_to:"text", type:"textarea", focus:true },
{ name:"location", height:43, map_to:"event_location", type:"textarea",
default_value:"Blackheath Avenue London,Greenwich,Greater London SE10 8XJ,UK"},
{name:"recurring", height:115, type:"recurring", map_to:"rec_type",
button:"recurring"},
{ name:"time", height:72, type:"time", map_to:"auto"}
];
each tag used in here is suppoted by the plugin,,,,in you want to have a seperate customize lightbox go to
http://docs.dhtmlx.com/scheduler/custom_details_form.html
This is the preview