How to scroll down to bottom of page when Add Toolbar button pressed?

S
Userlevel 3
Badge +16

Whats Up everyone,

 

Got an issue here which I know will result in end users complaining....

 

Got a Form with a List View added.

On the List View, when a user clicks the Add Toolbar. a new gets added at the bottom of the list (which is the correct behavior). However the problem is that if the list fills the entire webpage, naturally the webpage grows to add the extra row. But for the user, they have to manually scroll down to the bottom of the page to see the entry.

 

This would be an issue, because a User will just click the Add button and expect to see the new row on screen. It just looks like nothing has happened to the End user

 

Is there a rule action that i can use which says "On Add Toolbar Button Click" -> Scroll down to the newly added row? Or scroll to the bottom of the webpage?

 

I know it's trivial, but i want to make the form super user friendly.

 

Thanks

15 replies

E
Userlevel 2
Badge +9

Hello,


 


There is no specific rule that K2 has OOB to do a scroll "On Add Toolbar Button Click" -> Scroll down to the newly added row.


 


I know that there are a few ways with either Javascript or JQuery that you can use to scroll to the bottom, top, or even a specific part of the page. Perhaps you can implement some javascript on the smartform through a hidden literal datalabel. It might be possible to isolate the event of when a new item is added. Then you can tell the javascript to look for that event and then execute the code that will scroll to the bottom of the page.


 


-Evan

S
Userlevel 3
Badge +16

I've no idea about using Javascript? Anyone done anything similar using javascript to make the page scroll to the bottom on Button Click?

R
Badge +3

I have an answer that you may want to use if you do not find a cleaner solution. Add a string literal label containing some Jquery code: 

 

$("#buttonId").click(function() {
        $("html, body").animate({ scrollTop: $(document).height() }, "slow");
});

Replace '#buttonId' with the id of your toolbar button. The ID of my button was: 'ae5f6494-b12c-b62f-a154-c5058683d47e_7c1a7bc2-29e5-e609-1096-83bd5f616055'.

 

You could also put this code in the K2 JavaScript files if you don't want to use labels. Keep in mind that you will need to change the ID of the 'click' function if you ever change the button...

 

Sorry it's not a very clean answer, but I thought I'd throw it out there in case you need it! 

S
Userlevel 3
Badge +16

Thanks for that, i followed this post to add a data lable, then went into expression and ticked literal:

http://community.k2.com/t5/K2-blackpearl/How-to-call-javascript-in-k2-smartforms/m-p/86016#M26424

 

I pasted your code in, but how do you obtain the buttonID? Is it via Browser source?

R
Badge +3

Yes thats right :) 

 

By right clicking on your button and then selecting 'Inspect Element' you will see the source HTML. Look for the id=' ' attribute. 

 

Note: Make sure you put a pound sign (#) before your ID in the javascript e.g. $('#e62dbaf')

 

14894iE07B3BFC430EE39E.png

 

Hope this helps!

S
Userlevel 3
Badge +16

Mine comes a little difference, it has _ToolbarButton on the end, do i remove that part?

 

<a tabindex="0" class="toolbar-button toolbar-button-inline add" id="e6e44dd9-b221-35fa-5caa-d122a1bd947a_f82b8614-e343-4bf1-13d0-a9b717ef4e11_ToolbarButton" onclick="return false;" href="javascript&colon;;"><span class="button-l"></span><span class="button-c"><span class="button-icon"></span><span class="button-text">Add</span></span><span class="button-r"></span></a>

<span class="button-l"></span>

<span class="button-c"><span class="button-icon"></span><span class="button-text">Add</span></span>

<span class="button-icon"></span>

<span class="button-text">Add</span>

<span class="button-r"></span>

<a tabindex="0" class="toolbar-button toolbar-button-inline edit" id="e6e44dd9-b221-35fa-5caa-d122a1bd947a_740743a1-10fc-82ed-bd15-f8cced4f902c_ToolbarButton" onclick="return false;" href="javascript&colon;;"><span class="button-l"></span><span class="button-c"><span class="button-icon"></span><span class="button-text">Edit</span></span><span class="button-r"></span></a>

<a tabindex="0" class="toolbar-button toolbar-button-inline delete" id="e6e44dd9-b221-35fa-5caa-d122a1bd947a_d971378b-d208-d735-697e-7ec44ae4754f_ToolbarButton" onclick="return false;" href="javascript&colon;;"><span class="button-l"></span><span class="button-c"><span class="button-icon"></span><span class="button-text">Delete</span></span><span class="button-r"></span></a>

 

and just to confirm, the code goes in a DATA Label and not a normal Label box yes?

 

Thanks

R
Badge +3

You keep the _ToolbarButton part in there too (the format of the ID just varies depending on the control), so yours would look like:

 

$("#e6e44dd9-b221-35fa-5caa-d122a1bd947a_f82b8614-e343-4bf1-13d0-a9b717ef4e11_ToolbarButton").click(function() {
        $("html, body").animate({ scrollTop: $(document).height() }, "slow");
});

 

And yes, use a DATA label (not a regular label) and set the literal value to true. This will allow the script to execute.

S
Userlevel 3
Badge +16

Hey Reece,

 

Just tried that and it doesn't work.

Just to re-cap, i did this for testing:

 

1) On a Form i added multiple views to ensure the Form goes beyond one page and that the IE Browser window shows the scroller on the right

2) Added a Data Label, ensured Literal was ticked

3) Added expression: $("#e6e44dd9-b221-35fa-5caa-d122a1bd947a_f82b8614-e343-4bf1-13d0-a9b717ef4e11_ToolbarButton").click(function() { $("html, body").animate({ scrollTop: $(document).height() }, "slow"); });

4) Ran page, clicked on Add, nothing happens.

 

I have the data label set to visible, so on the webpage it shows the code in the label, is that right?

 

So i'm puzzled why it aint working, clicking Add should scroll the page to the bottom shouldn't it?

 

A
Userlevel 3
Badge +8

Dear Sharp ,

 

Ive tried ur scenario , and its actually working fine here ,even when the page is full , i add new row and it focus down to the new row ,  im on 4.6.10 k2 blackpearl ,

anywho , u could try a rule called "Execute  a control method" and use "focus" method , 

When add toolbar button is clicked , 

Execute control method and use any of the add/edit controls u got in the list , and focus on it ,

 

Hope it helps!

Regards.

S
Userlevel 3
Badge +16

In my above steps (using the jquery method), the data label is set to the expression. What rule event do i need to run to get it to run the expression when ADD is clicked?

 

The 2nd solution does work, but my toolbars are above the list. I can get it to focus on a Button below the list (but only if it is visible)

 

im on 4.6.8

 

Albarghouthy
Userlevel 5
Badge +16

Hi Sharpharp1

 

Note: you are targetting the ID, it might work on your machine but if you deploy the view/form to another environment, the ID will change as it's dynamic not static.

 

Check this post, it might be useful:

 

http://community.k2.com/t5/K2-blackpearl/how-to-scroll-to-a-specific-point-on-a-page-form/m-p/79382#M23319

A
Userlevel 3
Badge +8
Dear ,

There is a solution u might wanna give a try but only if no other solution worked for u , cu its kinda strange ,
Since focus work for visible controls , u could add invisible control under ur list ,
Then add thr following rules to the add tool bar button clicked event ,
-Show the text box control
-Use focus method
-hide the text box control

Hope it helps !
Regards.
S
Userlevel 3
Badge +16

Thanks guys, really appreciate it.

 

I went with the Focus Data Label and being able to go to any point on the page method.

Below the list i added the Data Label, and then whenever Add is clicked, it moves to that position (which will also be below the New Row).

 

Can i ask one last thing on this subject. When the New Row appears, I want to draw attention to it.

In the Add/Edit Item Text Boxes (Columns) below the List, I can edit the Watermark to say whatever I need, but its is kinda grey. Is there any way of changing the Watermark colour? I don't want to add anything to the Text Property, but wanted a Red Watermark whenever a new Row is added so the user sees it instantly....

 

You guys are great, thanks

A
Userlevel 3
Badge +8

Dear ,

 

What i think of about gettin their attention , by water mark , i think that u should try customizing ur css ,

prolly create new style theme , and find the water mark css and customize it , to make it red and bold for example .

 

Note: i dont have big experience in styling , but i do believe that if u customize the water mark , it will affect all other water marks , so u should consider this solution only if its okie for u to have all water marks with the same styling .

 

Regards.

S
Userlevel 3
Badge +16

Thanks guys,

 

Appreciate the info on the watermark, so i dropped that idea.

 

To help any others, I came up with a better solution, i simply put a vibrant arrow pointing up picture below the New row and hid it.

Then using the Add New Row rule, i set an action to make the arrow visible. This combined with the data label focus works a great.

 

 

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings