TYPO3 merge list and edit - typo3

I've got a TYPO3 backend module which lists a lot of elements. Now, I want to include in my list the edit form, but that doesn't work well at the moment.
Rendering is good, but if I send the form, I get the error:
Required argument "note" is not set.
My code looks like this:
<f:for each="{notes}" as="note">
<f:form action="update" name="note" object="{note}">
<textarea class="form-control gettooltip" rows="1" placeholder="Kommentar" title="Kommentar zur Note">{note.kommentar}</textarea>
</f:form>
</f:for>
How can I merge these two views correctly?

Your code cannot work because your textarea doesn't have a property (or you don't use the <f:form.textarea ViewHelper).
If you property map $note in your controller, the property must be passed to Fluid with the prefixed extension name and plugin name. This is done automatically when using the "property" argument of the textarea ViewHelper. The name attribute will then be:
<textarea name="tx_myext_myplugin[note]"...
Thîs will map to $note in the controller.
So if you don't use the ViewHelper, you need to manually prefix the name attribute to create an output like printed just above.
If you're planning to update multiple objects of the of the same kind in one request, this won't because because there is an Extbase limitation.
You could do the following:
Use a submit button for each note and save/reload the changes through AJAX.
<f:for each="{notes}" as="note">
<f:form action="update" name="note" object="{note}">
<f:form.textarea class="form-control gettooltip" placeholder="Kommentar" property="kommentar">{note.kommentar}</f:form.textarea>
<f:form.submit value="Update" />
</f:form>
</f:for>
Then you intercept the submit click, submit the form through AJAX and set the new content to the textarea.
If you want to have one form for all objects, you will need to prefix the fields
<f:form action="update" name="note">
<f:for each="{notes}" as="note">
<f:form.textarea class="form-control gettooltip" placeholder="Kommentar" name="note[note{note.uid}][kommentar]">{note.kommentar}</f:form.textarea>
</f:for>
<f:form.submit value="Update" />
</f:form>
You will then have an array of values and need to iterate in your controller and manually persist the changes.

For your problem - as #lorenz answered you need to use viewhelpers for rendering fields OR at least use valid name attributes for your fields...
Anyway, I'm wondering why do you want to reinvent the wheel - especially while creating BE modules, the fastest, easiest and most elegant way is... using TYPO3 forms. They handle many things, relations, localization, validation, RTE etc, etc. What's more you can also add own type of field to TCA and process with your own PHP and JS - very rare situation, but may be used i.e. for adding GoogleMap field,
#see: user type in TCA
Finally all you need to open the record from your BE module is creating proper link - which can be easily copied from List module (right click on the yellow pencil next to your record and copy the code), sample:
<a href="#" onclick="window.location.href='alt_doc.php?returnUrl='+T3_THIS_LOCATION+'&edit[fe_users][1234]=edit'; return false;" title="Edit user">
<span title="" class="t3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-open"> </span>
</a>
Where fe_users is table name and 1234 is record uid.
alt_doc.php?returnUrl='+T3_THIS_LOCATION part handles returning to the place from which edit was started, so it will be your module again including all GET params selected by admin before editing.
For creating new user
<a href="#" onclick="window.location.href='alt_doc.php?returnUrl='+T3_THIS_LOCATION+'&edit[fe_users][6789]=new'; return false;" title="New record">
<span class="t3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-new"> </span>
</a>
In this case 6789 is a PID (uid of the page where the user should be created...
You can even set some default values when creating records from your own module using params in your new link:
&defVals[table_name][field_name]=value
sample
<a href="#" onclick="window.location.href='alt_doc.php?returnUrl='+T3_THIS_LOCATION+'&edit[fe_users][6789]=new&defVals[fe_users][tx_extbase_type]=Tx_MyExt_People&defVals[fe_users][usergroup]=1'; return false;" title="New record">
<span class="t3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-new"> </span>
</a>

Related

Unwanted hidden field and missing for attribut in checkbox (TYPO3, Powermail)

I have a problem with TYPO3/Powermail. I tried to add custom checkbox images and ran into problems with IE. I found another website based on TYPO3 with customized checkboxes working fine on IE too.
What is weird is, that my html form structure (generated by TYPO3/Powermail) looks different.
Here is my checkbox html:
As you can see, I have a field with type hidden inserted, don't know why. And my label has no "for" attribut.
This form field here (TYPO3/Powermail as well) looks nice:
Here we have no strange hidden input field, and there is a "for" attribut in the label.
Can someone help?
The templates of the both installations differ. Check the original templates and partials delivered with EXT:powermail in folder EXT:powermail/Resources/Private. If you use own templates add all needed fields and options.
For example add the for-attribute to the <label> in partial for radio buttons: <label for="powermail_field_{field.marker}_{index.cycle}">.
In newer versions of EXT:powermail (7.3.1) file Resources/Private/Partials/Form/Field/Radio.html looks like:
{namespace vh=In2code\Powermail\ViewHelpers}
<div class="powermail_fieldwrap powermail_fieldwrap_type_radio powermail_fieldwrap_{field.marker} {field.css} {settings.styles.framework.fieldAndLabelWrappingClasses}">
<f:render partial="Form/FieldLabel" arguments="{_all}" />
<div class="{settings.styles.framework.fieldWrappingClasses}">
<f:for each="{field.modifiedSettings}" as="setting" iteration="index">
<div class="{settings.styles.framework.radioClasses} {vh:Validation.ErrorClass(field:field, class:'powermail_field_error')}">
<label>
<f:form.radio
property="{field.marker}"
value="{setting.value}"
checked="{vh:Misc.PrefillMultiField(field:field, mail:mail, cycle:index.cycle)}"
id="powermail_field_{field.marker}_{index.cycle}"
additionalAttributes="{vh:Validation.ValidationDataAttribute(field:field, iteration:index)}"
class="powermail_radio" />
<vh:string.escapeLabels>{setting.label}</vh:string.escapeLabels>
</label>
</div>
</f:for>
<f:if condition="{settings.validation.client}">
<div class="powermail_field_error_container powermail_field_error_container_{field.marker}"></div>
</f:if>
</div>
Resources/Private/Partials/Form/FieldLabel.html:
{namespace vh=In2code\Powermail\ViewHelpers}
<f:comment>
Partial file for the HTML-structure of nearly all field labels
</f:comment>
<f:if condition="{field.css} != 'nolabel'">
<label for="powermail_field_{field.marker}" class="{settings.styles.framework.labelClasses}" title="{field.description}">
<vh:string.escapeLabels>{field.title}</vh:string.escapeLabels><f:if condition="{field.mandatory}"><span class="mandatory">*</span></f:if>
</label>
</f:if>

How to insert a long text using the sendKeys Protractor API?

I have a long text 20 lines with HTML code that I need to use into a form test. For small texts I could use something like this:
browser.actions().mouseMove(element(by.id("field_bodytext")).sendKeys("BodyText <h2>Protractor</h2> Text1")).perform();
and it will work fine. But for 20 lines it does not. I have seen this information in Protractor API page, but can not see how to use it in my case:
http://www.protractortest.org/#/api?view=webdriver.WebElement.prototype.sendKeys
var form = driver.findElement(By.css('form'));
var element = form.findElement(By.css('input[type=file]'));
element.sendKeys('/path/to/file.txt');
form.submit();
There is an example for selenium that I do not see how to adapt: Selenium Webdriver enter multiline text in form without submitting it
This is the form field in Angular:
<div class="form-group">Wordhtml.com
<label class="form-control-label" jhiTranslate="jhipsterpressApp.post.bodytext" for="field_bodytext">Bodytext</label>
<textarea type="text" rows="10" cols="50" class="form-control" name="bodytext" id="field_bodytext"
[(ngModel)]="post.bodytext" required minlength="2" maxlength="65000">
<div [hidden]="!(editForm.controls.bodytext?.dirty && editForm.controls.bodytext?.invalid)">
<small class="form-text text-danger"
[hidden]="!editForm.controls.bodytext?.errors?.required" jhiTranslate="entity.validation.required">
This field is required.
</small>
<small class="form-text text-danger"
[hidden]="!editForm.controls.bodytext?.errors?.minlength" jhiTranslate="entity.validation.minlength" translateValues="{ min: 2 }">
This field is required to be at least 2 characters.
</small>
<small class="form-text text-danger"
[hidden]="!editForm.controls.bodytext?.errors?.maxlength" jhiTranslate="entity.validation.maxlength" translateValues="{ max: 65000 }">
This field cannot be longer than 65000 characters.
</small>
</div>
</textarea>
</div>
And the text to be inserted could be something like this:
<h2>What is JHipsterPress?</h2>
<ul>
<li>It is an open source and collaborative project made with Jhipster.</li>
<li>It is a live project that it is explained in its GitHub project. Explained? What do you mean? Whether you are a beginner that wants to find out an example about how to How to open access to the REST Api: or a more advance user who wants to see How to change DTOs to load attributes of not related entities: and see the actual code working, just visit the ReadMe file at GITHUB</li>
<li>And YES, you can use it for your own website.</li>
<li>At the same time JHipsterPress will try to create a community for Jhipster developers to join groups about different topics such as Websockets, Mapstruct, or anything you like.</li>
</ul>
<br />
Put the HTML in quotes `` as #lunin-roman is saying and then call it:
let htmltext = `<h2>What is JHipsterPress?</h2> and so on`;
element(by.id("field_bodytext")).sendKeys(htmltext);
and then use it in the element.sendKeys

Questions about grails form

Assuming that i have the following data in my params
params:[input:[1, 2, 3]]
And i have the following form in my Grails app
<div class="block1">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input1" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
<div class="block2">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input2" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
<div class="block3">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input3" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
The form design above is correct, because in my form design, there will be several inputs of the same name (but each will be saved to the database under different primary keys) and it can be increases and decreases according to user selection.
Few questions using the above
How do i make it so that the value for input1 is params.input[0], input2 is params.input[1] and input3 is params.input[2] in the view? I can pass the model from controller without problem, but i couldn't distribute the value properly to each input on the form.
Is there any way to change the value ${input} dynamically? As in if i want to change the value to ${input[0]} or ${input[1]}
Can i automatically set the amount of block appended into the form using the g:each tag? Say like if from controller i want to set the rendering block amount to 3, so can i use the g:each tag to render the block 3 times in the form?
Thanks
The links are examples of how to use ajax/jquery to get values from a remote call and replace html element (divId) within a page - this divId could be the entire
<input type="text" name="input" value="newvalue"/>
upon triggering some form of call as above to get the new value.. in regards to
g:textField
yes it works like all other grails tags in the end they are transformed back to the correct HTML terminology...
The actual variable value is dynamic if you defined
<input name="existingvariable" value="${something}" ...
where something was a parameter from the given controller - and then you updated the call so
://YOURHOST:8080/yourapp/controller?existingvariable=newvalue
and refreshed or clicked this link which is what ajax would be doing for you doing a new call to either another controller to generate new values or same and passing new value to it and then grabbing data and pushing it back onto the divId ... (all in the background)
Groovy loading into divs
Grails - Select menu not rendering
I want my selects dropdowns to auto populate with Ajax in Grails website
The above are all related to using ajax to populate / update existing form elements
If you wish to update a live form with a new live value (non existant in DB) take a look at modaldynamix plugin. //github.com/vahidhedayati/modaldynamix

Create repeatable custom form fields in web2py?

I want to create twitter bootstrap compliant form. According to the docs for Twitter Bootstrap v2.2.2 (the version included with web2py) the html should look like:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
...
I'm currently using SQLFORM which outputs html that doesn't really fit with this (even using formstyle='divs'). Besides I want my html output to be clean without web2py artifacts such as class="w2p_fl". So my thought is to use a custom form. However in doing this there would be a lot of repeated code. That is, the following would basically need to be repeated for each field.
{{=form.custom.begin}}
<div class="control-group">
{{=LABEL(form.custom.label['myfield'], _class='control-label',
_for='mytable_myfield')}}
<div class="controls">{{=form.custom.widget.myfield}}</div>
</div>
...
{{=form.custom.end}}
So how can I repeat the above unit of code so I could replace it with something like {{=bootstrap_field(db.mytable.myfield)}} or some other way to adhere to DRY?
What is the web2py way to do this? Create a view function? Pass a function in the dictionary returned by the controller? Create my own html helper? Create my own widget? Another way?
If you're using Bootstrap 2, you can just do:
form = SQLFORM(..., formstyle='bootstrap')
For Bootstrap 3 (or any other custom formstyle you'd like to create), the formstyle argument can be a function (or other callable) that produces the form DOM. The function will be passed the form and a fields object, which is a list of tuples, with each tuple containing a CSS id, label, input element, and (possibly empty) comment/help text. To get an idea of what such a function should look like, check out the one used for Bootstrap 2 forms.

Does wicket lose hold of the HTML components after a rearrangement through JavaScript?

I have a repeating component in wicked which needs to be added and deleted as per the user requirement. The maximum number of component is predefined. So I am adding the components at start up and hiding and showing based on need. I am required to change the arrangement of the components in the HTML markup when there is any deletion of the component. I use JavaScript for this. I want to know if wicket would lose hold of the components if I do this.
<div wicket:id="borrowerTabs" id="borrowerTabs">
<span wicket:id="borrowerTab1" id="borrowerTab1" ></span>
<span wicket:id="borrowerTab2" id="borrowerTab2" ></span>
<span wicket:id="borrowerTab3" id="borrowerTab3" ></span>
<span wicket:id="borrowerTab4" id="borrowerTab4" ></span>
<button wicket:id="addBorrower" id="addBorrower" type="button"></button>
<button wicket:id="deleteBorrower" id="deleteBorrower" onclick="updateUIForDeleteBorrower()" type="button"></button>
</div>
If delete the borrowerTab3, contents inside borrowerTab4 will be replacing the contents inside borrowerTab3 and the model objects too will be swapped though I do not do a target.add(borrowerTab3). Now while form submission, I am not getting the values of the fields inside borrowerTab3.
I'm not sure if it helps but try component.setVisible(false) in your java code to hide it.