93
Views
5
Comments
Solved
Popup Editor with Disable Link Widget
Application Type
Traditional Web

Hello Team,

I am dealing with an issue on my web application where Popup editor (which is linked to Link Widget) doesn't render under a special scenario provide bellow in Failure Scenario.

Information:

- The page has a Link Widget which is enabled/disabled based on a condition i.e. if any or all checkbox in the first column of the grid is checked

- By default the link widget is disabled and all checkboxes in the grid are unchecked.

- Link has Method Navigate

- The link is being enabled/disabled using client JS function that adds disable attribute to the link (a tag)

Failure Scenario:

- If the user clicks on the disabled link widget, and then checks the checkbox. The link widget afterwards doesn't work and doesn't open the popup editor.


I need help what could be the issue and help resolve the issue. 


Thanks in advance.





2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Wasif,

Thank you for clarifying the raised quires. I have implemented a sample app, considering the mentioned use-case. See this sample app

Please refer to the attached .oml file

Points to notice:

  • In the footer section, I have added a JavaScript expression to disable the link pointer events as their default setting
  • Disabled property won't work for hyperlinks. Refer to this post: Stackoverflow | disabled-href-tag
  • In the CheckBox OnChagne handler flow, I have defined a simple logic to Enable/disable the popup link


Hope this helps you!


Kind regards,

Benjith Sam

TWALabPopupLinkDemo.oml
2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Wasif,

As per the mentioned use-case, I do need a bit of clarification for the following queries..

  • Is it that the link should get enabled if any of the checkboxes in the first column of the grid is checked?
  • The link widget does have an Enabled boolean property still, why are you using JS to enabled/disabled the link based on some condition?
  •  If the user clicks on the disabled link widget - how come the use selects the disabled link??, and then checks the checkbox. The link widget afterward doesn't work and doesn't open the popup editor. 

See this sample app

  • Implemented Logic: Just toggled the Disabled (Fake) Link with Active link (which is mapped with the Popup Editor) using UI IF widget, based on certain condition i.e. If any checkbox is selected then the popup link will get enabled.


Hope this helps you!


Kind regards,

Benjith Sam

UserImage.jpg
Wasif Iqbal

Hello Benjith,

About your queries:

1. Yes, the link is disabled by default via JS Script. And it gets enabled as soon as one of the checkboxes is checked in the grid. To expand on that, if the user checks the checkboxes and later unchecks them all, the link goes back to the disabled form. All that is managed via JS script because the original design was to handle it at the client-side rather than triggering server action for every checkbox checked.

2. The link button does have Enable property but because we might have hundreds of rows in the grid and to do AJAX refresh (Server action) every time a checkbox is checked, it was handled at client JS via a disabled attribute.

3. So, the Link button action Method = Navigate and opens the Popup widget. When the disabled attribute is added to the Link, it is greyed out and doesn't open the popup widget which is good so far. But if in disabled form, the user clicks on the button and then goes to grid and checks one of the rows => which enables the link. But now the link doesn't open the popup widget. 

(Expanding to 3, in a perfect scenario, on load the link is disabled. The user checks one of the rows, the link gets enable. User click on the link, and it renders popup widget)

Thank you for providing the solution, but we are trying to handle it at the client script level so that we don't involve server action (AJAX refresh) for every checkbox checked. or minimize the call to the server if we have to involve the server action (AJAX refresh)

Regards, Wasif

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Wasif,

Thank you for clarifying the raised quires. I have implemented a sample app, considering the mentioned use-case. See this sample app

Please refer to the attached .oml file

Points to notice:

  • In the footer section, I have added a JavaScript expression to disable the link pointer events as their default setting
  • Disabled property won't work for hyperlinks. Refer to this post: Stackoverflow | disabled-href-tag
  • In the CheckBox OnChagne handler flow, I have defined a simple logic to Enable/disable the popup link


Hope this helps you!


Kind regards,

Benjith Sam

TWALabPopupLinkDemo.oml
2019-02-07 15-45-59
Rodrigo Rocha

hi Wasif

when the link is clicked, what happens? 

if you are navigating to the destination screen, you may be able to correct this just doing an ajaxrefresh on the popUpEditor widget attached to the link, after this link has been enabled.



UserImage.jpg
Wasif Iqbal

Hello Rodrigo,

The link method is set to Navigate and opens the popup editor widget.

What we are trying to achieve is to handle link enable/disable at the client-side, so that we don't have to call Server action (AJAX Refresh) for every checkbox click, or in worst case minizine the call for AJAX refresh.

Thank you

Regards, Wasif

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.