TYPO3: How to create a Dropdown in own Extension - typo3

I'm creating a filter in my extension, and i need there a dropdown from the entries of a table in the extension (in my example the colors table). I tried this:
<select class="option-set clearfix form-control" data-filter-group="farben">
<option value="*" data-filter-value="" class="selected">Alle Farben</option>
<f:for each="{steines}" as="steine">
<option value="#filter-farben-{steine.farbe.name}" data-filter-value=".{steine.farbe.name}">{steine.farbe.name}</option>
</f:for>
</select>
The Problem hereby is that the entries will be displayed multiple. For example:
Red
Green
Blue
Red
Blue
Blue
etc.
But it should be:
Red
Green
Blue
Any ideas?
Thx for your help!

Why do you create the select and all options manually? TYPO3 Fluid has a select ViewHelper which renders a select-field with all given options?
You should pass all available colors to your view (e.g. $this->view->assign('colors', $this->colorRepository->findAll());. Then use the colors in the select ViewHelper.
<f:form.select property="yourProperty" options="{colors}" prependOptionValue="*" prependOptionLabel="Alle Farben" />

Like you can see my and derhansen small discussion the problem is in your collection.
If you will pass in collection: Red, Blue, Blue, Blue, Yellow, Yellow then your loop will display every position from collection. The same thing will be with select viewhelper
The thing you should is to create a seperate collection that groups colors and will have only one instance of each color. Than you can go with your loop or with the viewhelper
For example you can create a simple query to database (if you have this info stored in db) using simple GROUP BY. Other solution is to iterate in in controller
$tmpCollection = array();
foreach($collection as $color) {
if(!in_array($color, $tmpCollection) {
$tmpCollection[] = $color;
}
}
than you can pass $tmpCollection to view and it will only contain one instance of color. Ofc course this is just pseudo code but you get the feeling of the solution :)

Related

icefaces 1.8.2: update a table with many selectOnemenu depending on a selectOnemenu

I have a ice:selectOneMenu with a list of cars. I need that, when I select a car, an optionals table with many selectOneMenu is updated and default values are automatically selected.
So:
Cars: <select>
Optionals Table
-----------------------
Colors: <select>
Engines: <select>
Seats: <select>
Interior Color: <select>
...
...
The problem is thatI change the Cars value but the table is not updated and its values are not selected
So I want that:
if I select a Ferrari car, in the optionals table: the red color is automatically selected, the 3902CC engine is automatically selected, etc.
if I select a Porche car, the white color is automatically selected, the 616/16 engine is automatically selected,etc.
I'm using icefaces 1.8.2 and probably I can not use an ajax tag.
How can I do?
Thanks!!
I've found a workaround solution. Using:
JavascriptContext.addJavascriptCall(FacesContext.getCurrentInstance(),javascriptCodeString);
to add Javascript code to the page.
The string javascriptCodeString must contain a Javascript code that use CSS classes to bind a click event to an hidden <ice:commandButton styleClass="updateFieldsCommandButton" ... > that will call an action (for updating fields values):
function updateFields() {
document.getElementsByClassName('updateFieldsCommandButton')[0].click();
}
var listOfFields=document.getElementsByClassName('fieldToBeUpdated');
for(var i=0,len=listOfFields.length;i<len;i++) {
listOfFields[i].addEventListener('change', updateFields);
}
This works with icefaces 1.8.2 without needing an ajax tag.

Nested Filter options in Spotfire

I am learning to create reports using spotfire. Could you please help me to understand the feasibility.
Is it possible to change the filters based on the previous selection(filters has to be altered based on the previous section)
For Example:
I have a following table, with three columns.
Filter1 Filter2 Data
Name Name1 test1
Age Age1 test2
Location Location1 test3
I am planning to have filter options based on the column Filter1 and Filter2.
Is it possible to create a drop down with the values "Filter1" and "Filter2"?
Is it possible to modify the list of filter options, based on the first drop down selection.
For example. if "Filter1" is selected in the drop down. The list of filter options should be "Name","Age", "Location".
if "Filter2" is selected in the drop down. The list of filter options should be "Name1","Age1", "Location1".
Thank you
We can also create a cascading drop down list through the following steps.
Create a “property Control – Drop down list” myDropDownList
Select the “Unique Column Value ” to populate the drop down list (values).
Go to “Insert -> Calculated Column”
Use a simple conditional statement something like If([Value1] = ‘${myDropDownList}’, [Value 2], NULL)
Use the newly created column in the text area filter. This will be updated based on the previous section.
Thanks.
I have a solution utilizing JavaScript to effectively toggle between hidden DIVs. I'm not aware of a way to manipulate the filter object and which column it points to in the Text Area through the API. If someone does know a way I'd love to hear it!
Here is my solution with JS:
Set up your Text Area with a Drop Down for your selection as a column selector (with columns of interest chosen through the "Select Columns..." dialogue), a label displaying that selection (we will hide this, I realize it seems redundant), and 2 filters for your 2 columns.
Right click your text area and click Edit HMTL. Utilizing the HTML below, modify your HTML to match. You will want to have the 1st DIV as your drop down, the SPAN as your label which displays that drop down's property, and then the last 2 DIVS (LETTER and NUMBER in my case) as your two filters. Make sure the DIV id name matches your column name exactly.
<DIV><SpotfireControl id="8dc9d8974bde445cab4c97d38e7908d6" /></DIV>
<SPAN id=docProp style="DISPLAY: none"><SpotfireControl id="1311015997cd476384527d91cb10eb52" /></SPAN>
<DIV id=LETTER style="DISPLAY: none"><SpotfireControl id="760ae9ffd71a4f079b792fb5f70ac8b4" /></DIV>
<DIV id=NUMBER style="DISPLAY: none"><SpotfireControl id="488ef4b1289440d5be24b0dd8cfc3896" /></DIV>
Next we will implement the JS. To do so, click the +JS button in your Edit HTML. The JS itself is below. You'll want to change my inputs of LETTER and NUMBER in the first 2 getElementById references where we set them to display:none.
filter = function(){
input = $("#docProp").text().trim() //Take the text from our hidden label and trim it from any white space.
document.getElementById("LETTER").style.display = 'none'; //Reset DIV
document.getElementById("NUMBER").style.display = 'none'; //Reset DIV
document.getElementById(input).style.display = 'block'; //Set new display
}
//Run this function every 333ms or other length of time desired to update your filters.
setInterval(filter,333)
//Larger numbers mean slower response and better performance vs. faster response and worse performance. Tune as necessary.
Alternatively instead of scanning every X milliseconds (can cause some performance drag), you can make a JS button to run it manually. e.g. $("#divIdForButtonPlacement").button().bind('click',filter)
A few images of my setup for testing are shown below. Let me know if you have any questions regarding this.

dijit.form.Select showing blank, but dijit.form.FilteringSelect works

I'm making a form with a drop down box. When I use dijit.form.Select, there is only one option and it's blank. When I use djiit.form.FilteringSelect, the box works as intended. records returns a store of the options. Code follows...
js:
oFetchLookup.drcrType(function(records) {
console.log(records)
dijit.byId("drcr_drcrtypeid").store = new Memory({
idProperty: "id",
data: records
});
});
html:
<select id="drcr_drcrtypeid" name="drcr_drcrtypeid"
data-dojo-type="dijit/form/Select"
data-dojo-props="intermediateChanges:true, style:'width:220px', tabindex:3">
</select>
The Select widget has a setStore(if the link doesn't work properly, navigate to "dijit/form/Select" from the treeview on the left and look for "setStore" in the "Method summary") method. Have you tried using it?
Also have you checked the dojo tutorials(especially this one)?
I'm not sure if this is your issue, but I had something similar happen. Apparently the font color was white on white. FilteringSelect changes the font color to black automatically, but it needs to be explicitly done in Select.

iTextSharp list bullet - bullet colour bug?

I'm trying to use iTextSharp to produce some auto-generated PDF flyers of marketing material based on HTML content stored in a database. Its working really well, but I've found something I think might be a bug in iTextSharp.
I start with a block of HTML that might contain regular HTML lists like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
I run the block of HTML through HTMLWorker.ParseToList to get a list of the parsed items ready to add to the PDF.
With lists, our corporate style is to have the text in black, but the bullet point in blue. So I run through the list of elements and find those which are Lists, and set the colour of the symbol to be blue:
List<IElement> elementsList = HTMLWorker.ParseToList(new StringReader(strHtml), style);
for(int cnt = 0; cnt < elementsList.Count; cnt++)
{
IElement element = (IElement)elementsList[cnt];
if (element is List)
{
List l = (List)element;
l.Symbol.Font.Color = new BaseColor(26, 189, 201);
/* then code here which adds the list to the output column */
}
else
{
/* code which adds the element without any extra processing */
}
}
This works perfectly, only the blue colour is also applied to the text of the last item in the list (not just the bullet). As I say, only the last item in the list is affected. The other items output perfectly with blue bullet points, and black text. I can't post a picture apparently, but I've linked to a PNG below:
[click to see the problem]
Just wondered if anyone had come across this before, and if so, whether there was a work around. I've tested with the latest version of iTextSharp, to make sure I'm up-to-date.
Is setting List.Symbol.Font.Color the correct way to do it? I assume so because it works for all the elements of the list, just not the very last one!
Thanks,
Steve.

Get/Set Checkbox and Radio Button values using Prototype

Prototype is great, but with the 1.6.1 release, the library still doesn't allow getting/setting of grouped inputs (checkboxes and radio buttons.) I'd like a way to get an array of selected values with $F($("form").checkboxes). I'd like to be able to set those checkboxes to an array of values, on the flip side.
Ideas?
You can always do something like this: (assumes you have your checkboxes have a class of checkboxes).
var checkedList = [];
$$('.checkboxes').each(function(ele){
if( $(ele).checked )
{
checkedList.push($(ele).name);
}
});
edit - just realised i misread the question, code below only good for setting values:
var form = $('options');
checkboxes = form.getInputs('checkbox');
checkboxes.each(function(e){ e.checked = 0 });
// or even checkboxes.invoke('checked',0);
could maybe use something like this though:
var cels = new Array();
$$('checkbox[checked="checked"]').each(el){
cels.push(el.value);
}
This is only for radio buttons, but still useful.
Get
$$('input:checked[name="radio_name"]')[0].value
Set
$$('input[name="radio_name"][value="to_select"]')[0].checked = true
"radio_name" is the name of your radio group. "to_select" is whichever value you want to select. The "[0]" works because only 1 radio button can be checked at a time.
On a side note, I kinda don't like prototype. A lot easier in jQuery, but you gotta use what you gotta use.
I ended up writing my own extensions to Prototype to do this. You can see them on Github. Here's a note from the project:
"These extensions allow you to use Prototype’s convenient $F() syntax to get and set the values of these grouped input elements. They’ve been tested with Prototype 1.6.0.3 and 1.6.1. There are other bits in these extensions as well. See the README.html file for more details."
The answers from seengee and Los are much appreciated, but I wanted a more integrated solution that would allow me to work with checkboxes and radio buttons with the natural $F() syntax that I already use with other form elements.
Given HTML:
<label><input type="radio" id="choiceA" name="choices" value="A" checked="checked" /> A</label>
<label><input type="radio" id="choiceB" name="choices" value="B" /> B</label>
This does a CSS styles query and returns the value for all of the elements.
$$('input:checked[type="radio"][name="group-name"]').pluck("value");