New widget SetFocusOnErrorWidget: reposition the page on element with an error

9
Our application has two really large pages. When the user clicks the Save button and validation fails, the error message may very well be on an element that is not currently visible. The user thinks that the application hangs. I registered ticket 102685, Focus is not set on element with error after save, about this. The ticket was accepted but got a good kick down the list: not planned for the next releases. We need it anyway so I created a widget that does the trick. SetFocusOnErrorWidget finds an input element with an error (usually the first) and sets the focus on it. The page is scrolled to make sure the widget is visible. If the widget is in a groupbox that is currently collapsed, the groupbox is expanded too. Just drop it in the dataview and it will work. Unfortenately, this widget does not work with tab containers. There is an issue with tab containers, ticket 204322. In some situations the error messages are shown in a popup unless the user actually visited the tabs. As soon as this issue is solved, I can enhance the widget to show the tab which has validation error(s) on its input elements. I have submitted the widget for the appstore, it is also on GitHub: https://github.com/synobsys/mendix-SetFocusOnErrorWidget
asked
2 answers
3

You can use Scroll To Anchor widget as an alternative. This widget does lot more then just setting focus on error filed. You can set focus/scroll to a specific place within the page you want; on page load, on object or attribute change, on validation. It's easy to configure and has good documentation to set it up. This is an awesome widget which helps a lot in a project to set focus/scroll within a page.

answered
0

Please fix that widget up for the newer mx, currently i have to resort to this

 

setTimeout(
	function(){
		var arr_btn=dojo.query(
			//'.mx-button'
			'.el_MxValidationFocus'
		);
		for(var i=0;i<arr_btn.length;i++){
			dijit.byNode(
				arr_btn[i]
			).connect(
				arr_btn[i],
				'click',
				function(){
					var tdNodeList= dojo.query('.mx-validation-message');
					if(tdNodeList.length>0){
						for(var i=0;i<tdNodeList.length;i++){
							if(
							dojo.style(
								tdNodeList[i],
								"display"
							)!=="none"
							){
								dojo.query(
									tdNodeList[i]
								).parent()[0].scrollIntoView();
								break;
							}
						}
					}
				}
			);
		}
	},
	1000
)

 

answered