B4J Question [ABMaterial] ABMModalSheet (IsDismissible=True) and ABMDateTimePicker ESC handling

[OliverA]

Case: Using an ABMDateTimePicker control within an ABMModalSheet that has its IsDismissble property set to True

Issue: When calendar pops up, clicking outside of the calendar does nothing (good). But when one presses the ESC key, the underlying modal sheet closes and the calendar remains.

Expected/Wanted result: When the calendar is up and a user presses the ESC key, the calendar closes, or, at minimum, nothing else is affected when pressing the ESC key and the user just has to use the close button on the calendar to close the calendar.

How can the expected/wanted result(s) be achieved?

 

[Cableguy]

Try to catch the ModalSheet closing event to close the celendar too

 

[OliverA]

By that time it looks like the component is gone (unless I'm doing it wrong).
Just before opening the modal sheet I have

Dim startDate As ABMDateTimePicker
startDate.Initialize(page, "startDateAUT", ABM.DATETIMEPICKER_TYPE_DATE, aDate, "Start date", "")
'Some more code
modal.Content.Cell(2,1).AddComponent(startDate)
'Some more code
page.ShowModalSheetAbsolute("dataView", "5%", "5%", "90%", "90%")

Page_ModalSheetDismissed code is

Sub page_ModalSheetDismissed(Target As String)
   Log("Modal dismissed: " & Target)
   If Target.EqualsIgnoreCase("dataview") Then
       Dim datePicker As ABMDateTimePicker = page.Component("startDateAUT")
       If datePicker <> Null And datePicker.IsInitialized And datePicker.Enabled Then
           Log("Trying to close datePicker")
           datePicker.Visibility = False
       End If
   End If
   isModalOpen = False   
End Sub

Note to code above: I have no clue if it is the Visibility that would close the datePicker object
The log shows

Modal dismissed: dataview
No component found with id startDateAUT

 

[Cableguy]

Hugh... Isn't the dataview a ModalSheet component? You are trying to get it from the page, and obviously it doesn't "live" there!

 

[OliverA]

Hugh... Isn't the dataview a ModalSheet component?

Yes.
Updated code:

Sub page_ModalSheetDismissed(Target As String)
   Log("Modal dismissed: " & Target)
   If Target.EqualsIgnoreCase("dataview") Then
       Dim model As ABMModalSheet = page.ModalSheet("dataview")
       Dim datePicker As ABMDateTimePicker = model.Content.Cell(2,1).Component("startDateAUT")
       If datePicker <> Null And datePicker.IsInitialized And datePicker.Enabled Then
           Log("Trying to close datePicker")
           datePicker.Visibility = "hidden"
       End If
   End If
   isModalOpen = False   
End Sub

No I at least get the following log entry

Trying to close datePicker

I tried
datePicker.Visibility = False
datePicker.Visibility = "none"
datePicker.Visibility = "hidden"
datePicker.Enabled = False
without getting the calendar to close. Hm...

 

[Cableguy]

At least now you are getting the dataview correctly...
I'm not near my computer now so I cannot assist further, but I know for a fact that many times with ABM the solution is simply eluding

 

[alwaysbusy]

Maybe after dataPicker.Visibility do a datePicker.Refesh because the browser doesn't know it yet that you changed the setting?

 

[OliverA]

Maybe after dataPicker.Visibility do a datePicker.Refesh because the browser doesn't know it yet that you changed the setting?

That did not work neither. What does the trick is

model.Content.Cell(2,1).RemoveComponent("startDateAUT")

The page_ModalSheetDismissed now looks like this

Sub page_ModalSheetDismissed(Target As String)
   Log("Modal dismissed: " & Target)
   If Target.EqualsIgnoreCase("dataview") Then
       Dim model As ABMModalSheet = page.ModalSheet("dataview")
       If model.Content.Cell(2,1).Component("startDateAUT") <> Null Then
           model.Content.Cell(2,1).RemoveComponent("startDateAUT")
       End If
   End If
   isModalOpen = False   
End Sub

Opinion: I still would like it better that the ESC button would either close the ABMDateTimePicker component or just plain do nothing. I just seems weird that a user opens the calendar, presses escape and the whole behind the calendar modal dialog disappears. Would this be a valid WISH in the feedback app or is there something else that can be done?

 

[Cableguy]

Question : how does the dataview behave when you call the ModalSheet again after having dismissed it once, this removing it from the ModalSheet?

 

[OliverA]

Question : how does the dataview behave when you call the ModalSheet again after having dismissed it once, this removing it from the ModalSheet?

Currently, when I build the modal sheet, the content portion of the modal sheet is just

modal.Content.AddRowsM2(3, False, 0, 0, 0, 0,"").AddCells12(1,"")
modal.Content.BuildGrid

Before showing the modal sheet, I fill the rows as needed. For example, in this case I use all 3 rows (first row is the header, second row is optional for, well, options, and third row is for content):

modal.Content.Cell(1,1).RemoveAllComponents
modal.Content.Cell(1,1).AddComponent(lbl)
modal.Content.Cell(2,1).RemoveAllComponents
modal.Content.Cell(2,1).AddComponent(startDate)
modal.Content.Cell(2,1).AddComponent(stopDate)
modal.Content.Cell(3,1).RemoveAllComponents
modal.Content.Cell(3,1).AddComponent(tblUsers)

So, deleting the component in page_ModalSheetDismissed does not affect the next displaying of the modal sheet. Come to think of it, maybe I should use page_ModalSheetDismissed to clear the modal of it's contents instead of doing it in the sub(s) that populate and display the modal sheet (this way there is one place where it gets done).

 

[alwaysbusy]

This should close the DatePicker:

Sub page_ModalSheetDismissed(Target As String)
   Log("Modal dismissed: " & Target)
   If Target.EqualsIgnoreCase("dataview") Then
       Dim model As ABMModalSheet = page.ModalSheet("dataview")
       Dim datePicker As ABMDateTimePicker = model.Content.Cell(2,1).Component("startDateAUT")
       If datePicker <> Null And datePicker.IsInitialized And datePicker.Enabled Then
           Log("Trying to close datePicker")
           page.ws.Eval("$('#" & datePicker.ID  & "').bootstrapMaterialDatePicker('hide', '');", Null)
           page.ws.Flush
       End If
   End If
   isModalOpen = False  
End Sub