Re: Fighting with Ajax Modal Dialogs et.al.
Re: Fighting with Ajax Modal Dialogs et.al.
- Subject: Re: Fighting with Ajax Modal Dialogs et.al.
- From: Markus Ruggiero <email@hidden>
- Date: Wed, 13 Dec 2017 09:43:17 +0100
Ok, textfield vs. string, no issue here. If I know how to "get back the
selected values" I can certainly do something with it. Of course I would prefer
to update things right on the server. So when the user picks an address an
action on the server should fire. This action needs to know the context (e.g.
the currentObject) and at the end remove the dialog and refresh the display.
That's my problem right now. I can show the dialog, but I cannot trigger the
pickAction and clean up afterwards. Knowing the currentObject is possible when
the dialog stuff is part of the main page. How could I pass this information to
a separate component that renders the contents of the dialog?
AjaxUpdateContainer and AjaxObserveField are know to me and I use them often
for "cascading" hierarchical popups.
I am lacking the grand picture and the concepts of the Ajax Framework.
Thanks for enlightening me.
---markus---
> On 12 Dec 2017, at 21:27, Samuel Pelletier <email@hidden> wrote:
>
> Markus,
>
> I think you just stick too much on the textfield part... Suppose you just
> want to display the selected address in a string instead (and then replace
> the string by a textfield).
>
> The tricky part is to refresh the form with the selected address information
> added to it. You could do some javascript or update the server state and
> refresh the form. I prefer to update the server and refresh. Are you familiar
> with AjaxUpdateContainer and AjaxObserveField ? In my recent apps, I tend to
> autosave almost everything on each field update so users never loose change
> because a save button was forgot.
>
> Samuel
>
>
>> Le 12 déc. 2017 à 12:22, Markus Ruggiero <email@hidden
>> <mailto:email@hidden>> a écrit :
>>
>> Samuel,
>>
>> can you imagine? I am even more confused right now because I think I
>> understand what you're telling me --- but then I am not able to make sense
>> of it and adapt it to my problem.
>>
>> Can you/someone else create a minimalistic complete demo that shows exactly
>> how to do the following:
>>
>> in html:
>>
>> <... wo form ... >
>> .....
>> <webobject name = "shippingAddressTextfield" /> [button or link here to open
>> a modal dialog]
>> ....
>> <... end wo form ... >
>>
>>
>> in wod:
>> shippingAddressTextfield : WOTextField { value = currentObject.address; }
>>
>>
>> The modal dialog shows a tablular list of ShippingAddresses, each
>> ShippingAddress has additional fields to help the user pick the right one.
>> There is a button or link besides each row to pick that particular one.
>> The contents of the dialog should preferably be generated by a separate
>> component, but I can also do it right inside the main component if that was
>> simpler to do.
>>
>> When the user picks one of the address rows the dialog should close and the
>> address string should be put into the text field (possibly just putting it
>> there as if the user had typed it himself)
>> There should be a way to dismiss the dialog without picking anything.
>> When the user selects a ShippingAddress the textfiels should not be editable
>> anymore
>> Particularly great would be to not only show the selected address but do a
>> currentObject.addObjectToBothSidesOfRelationshipWithKey(selectedShippingAddress,
>> CustomerRequest.SHIPPING_ADDRESS_KEY); This would require the dialog
>> component to have the currentObject passed to it somehow. How to do this?
>>
>> I know how to do some of these things with plain javascript but then I have
>> no idea how to integrate with WO. So I started to look into Ajax.framework
>> and studied the AjaxExamples. This didn't help but confuses me even more as
>> the examples just show how some components are being used but there is no
>> explanation of the underlying concepts and how to solve a problem with these
>> things.
>>
>> Thanks a lot
>> ---markus---
>>
>>
>>> On 12 Dec 2017, at 13:32, Samuel Pelletier <email@hidden
>>> <mailto:email@hidden>> wrote:
>>>
>>> Markus,
>>>
>>> I have a very similar implementation is an app where a new user is added by
>>> selecting a contact.
>>>
>>> In my UsagerList component where I have the new user function I have this
>>> in my html file:
>>>
>>> <wo:AjaxModalDialog label = "$localizer.UsagerList.button.ajouterUsager"
>>> width = "800" title = "$localizer.UsagerList.button.ajouterUsager" class =
>>> "tiny button" style = "margin-bottom:0;">
>>> <wo:ContactSelector selectedContact = "$selectedContact" selectAction =
>>> "$addUsager"/>
>>> </wo:AjaxModalDialog>
>>> ....
>>> <wo:AjaxModalDialogOpener class="tiny button" title = "Édition d'un usager"
>>> action = "$editItem" dialogId = "usagerEditor"
>>> >Éditer</wo:AjaxModalDialogOpener>
>>>
>>> The add button open the modal that display my ContactSelector component
>>> with 2 bindings. The selectedContact will contain the selected contact (an
>>> object of my Contact entity) and the selectAction will be performed upon
>>> selection.
>>>
>>> In my UsagerList java class, I have a public WOActionResults
>>> addUsager() method that create or edit a user for this contact in a modal
>>> dialog. In your case, just put the value in the desired attribute of your
>>> edited object and close the displayed modal dialog by calling
>>> AjaxModalDialog.close(context()); For your situation, I would add the to
>>> the closeUpdateContainerID = "editor" AjaxModalDialog bindings to refresh
>>> the form and show the selection to the user.
>>>
>>>
>>> public WOActionResults addUsager() {
>>> EOEditingContext ec = ERXEC.newEditingContext();
>>> Usager usager = Usager.fetchUsager(ec,
>>> Usager.CONTACT.eq(selectedContact().localInstanceIn(ec)));
>>> if (usager != null) {
>>> setEditedItem(usager);
>>> AjaxModalDialog.open(context(), "usagerEditor",
>>> localizer().localizedStringForKeyWithDefault("UsagerList.text.editerUsager"));
>>> }
>>> else {
>>> Usager newUsager = Usager.createUsager(ec);
>>>
>>> newUsager.setContact(newUsager.localInstanceOf(selectedContact()));
>>> newUsager.setUserName(selectedContact().email());
>>> setEditedItem(newUsager);
>>> AjaxModalDialog.open(context(), "usagerEditor");
>>> }
>>> return null;
>>> }
>>>
>>> The ContactSelector component needs to be non synchronizing, either by
>>> extending ERXNonSynchronizingComponent or by overriding the
>>> synchronizesVariablesWithBindings method.
>>>
>>> Here is the selectContact method in ContactSelector:
>>> public WOActionResults selectContact() {
>>> EOEditingContext ec = (EOEditingContext)
>>> valueForBinding(EditingContextBindingName);
>>> if (ec == null) {
>>> setValueForBinding(item(), SelectedContactBindingName);
>>> }
>>> else {
>>> setValueForBinding(item().localInstanceIn(ec),
>>> SelectedContactBindingName);
>>> }
>>> return (WOActionResults) valueForBinding(SelectActionBindingName);
>>> }
>>>
>>> Samuel
>>>
>>>
>>>
>>>> Le 12 déc. 2017 à 05:59, Markus Ruggiero <email@hidden
>>>> <mailto:email@hidden>> a écrit :
>>>>
>>>> Hi Samuel,
>>>>
>>>> thanks for your help, but there are some things still not clear.
>>>>
>>>> I have that WOTextField I want to populate. Next to the text field I need
>>>> a clickable element (link, button, whatever) that the user user can use to
>>>> call up an overlay modal dialog. This dialog gets a list of addresss from
>>>> the database. The user can then click one of the addresses (a link or a
>>>> button) to pick the one he needs. This selection action should close the
>>>> dialog and put the selected address string into the text field.
>>>>
>>>> I already have a component that retrieves the possible addresses and lists
>>>> them in tabular form. It also shows a [pick this] link.
>>>>
>>>> That's as far as I got. Currently the dialog opener displays the "Select
>>>> Address" link (should eventually replace the Address Index button. What do
>>>> I do in that yellow component when the user clicks one of the select
>>>> buttons? And how can I pass values to the ShippingAddressSelection
>>>> component? It ought to know the object being edited on the main form, but
>>>> it is called up by the componentName binding on the dialog, no way to bind
>>>> anything.
>>>>
>>>> I must miss something very simple. The Ajax Examples are not of help here
>>>> (or I just don't get it), as they show some things but actually do not
>>>> give an answer to a "how do I do this..." type of question.
>>>>
>>>> Thanks for bearing with me.
>>>> ---markus---
>>>>
>>>> addressSelectionDialogOpener : AjaxModalDialogOpener {
>>>> dialogId = "selectAddressDialog";
>>>> linkTitle = "Select Address";
>>>> label = "Select Address";
>>>> }
>>>>
>>>> selectAddressDialog : AjaxModalDialog {
>>>> pageName = "ShippingAddressSelection";
>>>> id = "selectAddressDialog";
>>>> title = "Select Shipping Address";
>>>> centerVertically = true;
>>>> locked = true;
>>>> width = 630;
>>>> height = 320;
>>>> overlayOpacity = "0.5";
>>>> overlayDuration = "0.1";
>>>> slideDownDuration = "0.1";
>>>> slideUpDuration = "0.1";
>>>> closeUpdateContainerID = "shippingAddressUpdateContainer";
>>>> }
>>>>
>>>>
>>>> <addresspanel.jpeg>
>>>>> On 11 Dec 2017, at 21:59, Samuel Pelletier <email@hidden
>>>>> <mailto:email@hidden>> wrote:
>>>>>
>>>>> Hi Markus,
>>>>>
>>>>> If I understand your requirement correctly, you want a modal that allows
>>>>> selecting some value(s) for a form field and want the selection be
>>>>> visible in the displayed form after the modal close.
>>>>>
>>>>> The trick is to define an AjaxUpdateContainer around the zone to be
>>>>> updated after the modal close. If you use AjaxObserveFields on your form,
>>>>> you can have a large section refreshed safely.
>>>>>
>>>>> You also need to define the AjaxModalDialog with it's id and add the
>>>>> closeUpdateContainerID binding to specify the AjaxUpdateContainer to
>>>>> update when the dialog close.
>>>>>
>>>>> <wo:AjaxModalDialog closeUpdateContainerID = "formContainerId" id =
>>>>> "selectValueDialogId" ...
>>>>>
>>>>> And lastly, put the link to open the dialog on your form...
>>>>> <wo:AjaxModalDialogOpener dialogId = "selectValueDialogId" class = "tiny
>>>>> button" label = "$localizer.button.selectionner"/>
>>>>>
>>>>>
>>>>> Samuel
>>>>>
>>>>>
>>>>>
>>>>>> Le 11 déc. 2017 à 11:41, Markus Ruggiero <email@hidden
>>>>>> <mailto:email@hidden>> a écrit :
>>>>>>
>>>>>> it always the same ... not using these things often results in utter
>>>>>> confusion when finally I need to do this.
>>>>>>
>>>>>> I have a standard page with a large form.
>>>>>> On that page there is a text field that the user can ...
>>>>>> - enter an value directly
>>>>>> - depending on previously made selections further up in the form the
>>>>>> value is already set and cannot be changed
>>>>>> - depending on previously made selections further up in the form there
>>>>>> is a button/link next to the text field that should open a modal dialog
>>>>>> with a list of strings to pick from (the field is not editable direcly).
>>>>>> My problem is that 3rd option.
>>>>>>
>>>>>> I already have a small component that loads the available strings from
>>>>>> the database and shows them in a table. The user can then click a [pick
>>>>>> this] - hyperlink next to an entry (or close the selection box without
>>>>>> picking anything. The picked
>>>>>> value should be put into the text field.
>>>>>>
>>>>>> I succeeded partially with the help of the Ajax Examples. Tried
>>>>>> AjaxModalDialog as well as AjaxModalUpdate. I can show a dialog with
>>>>>> both elements and the correct data, but from there? ..... I am lost.
>>>>>>
>>>>>> Which one to use, AjaxModalDialog or AjaxModalUpdate?
>>>>>> How do I get the selected String back / put it into the underlying
>>>>>> object-to-be-edited, update the display and close the dialog.
>>>>>>
>>>>>> Can anyone provide me with a simple example?
>>>>>>
>>>>>> Thanks a lot
>>>>>> ---markus---
>>>>>>
>>>>>>
>>>>>> _______________________________________________
>>>>>> Do not post admin requests to the list. They will be ignored.
>>>>>> Webobjects-dev mailing list (email@hidden
>>>>>> <mailto:email@hidden>)
>>>>>> Help/Unsubscribe/Update your Subscription:
>>>>>>
>>>>>>
>>>>>> This email sent to email@hidden <mailto:email@hidden>
>>>
>>
>
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list (email@hidden)
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden