Click on button and will bring you to the specific part of the page on the same page
Question

Hi,

It is possible to be direct to the specific part of the same page?

For instance, the picture below, we have two buttons namely, colour and fruits. So when the user click colour, it will directly them to the colour information (focus) on the same page.

According to my research, i understand it can be work with block right?


mvp_badge
MVP
Solution

Hi Pankaj,

See attachment.

Bookmark.oml

Champion

Kilian Hekhuis wrote:

Hi Pankaj,

See attachment.

Thanks, Kilian, it's working really great I was not aware of this thing in outsystems.


Regards,

PAnkaj


Champion

Kilian Hekhuis wrote:

Hi Pankaj,

See attachment.

Hi Killian,

Can we have animation on this. right now it just navigating to the specific div without animation.


Regards

Pankaj


mvp_badge
MVP

Pankaj Pant wrote:

Kilian Hekhuis wrote:

Hi Pankaj,

See attachment.

Thanks, Kilian, it's working really great I was not aware of this thing in outsystems.


Regards,

PAnkaj



It's not part of outsystems, it's part of the html-spec!


mvp_badge
MVP

Pankaj Pant wrote:

Can we have animation on this. right now it just navigating to the specific div without animation.

Since this is just a link, you can't if you use it like this, not without some JavaScript trickery (but I'm not very versed in that).

Kilian Hekhuis wrote:

Hi Pankaj,

See attachment.

Hi,

Thanks for OML, How is it possible with Mobile?


regards,

Naveen


Champion

Yes, you can do this by jquery.

see the bellow link https://pankajpant824.outsystemscloud.com/SilkUIBaloonwidget/Home.aspx?_ts=636406402499184791

and PFA


Regards

PAnkaj


mvp_badge
MVP

Hi Jace,

You could simply use an HTML bookmark (i.e. a link to #<Id of widget>)?

Hi PAnkaj,

How to use jquery to navigate?? 

Hi Kilian,

Do we need to use web block for the screen in order to use an html bookmark?

Champion

Jace Jace wrote:

Hi PAnkaj,

How to use jquery to navigate?? 

Hi Kilian,

Do we need to use web block for the screen in order to use an html bookmark?

PFA OML.


divscroll.oml

mvp_badge
MVP

Hi Pankaj,

No, that won't be necessary. Just make sure to give your container (or other widget) a name, and use that name.id in the link.

Champion

Kilian Hekhuis wrote:

Hi Pankaj,

No, that won't be necessary. Just make sure to give your container (or other widget) a name, and use that name.id in the link.

Hi Kilian,

Could you please share the OML for the same. will it show both the container same time on the same page if I will scroll. or it will show hide the container?

"Bookmark"

In simple HTML, i am available to do that but in outsystems when I pass the id in extended property it is not getting rendered in HTML.


Regards

PAnkaj


mvp_badge
MVP
Solution

Hi Pankaj,

See attachment.

Bookmark.oml

Champion

Kilian Hekhuis wrote:

Hi Pankaj,

See attachment.

Thanks, Kilian, it's working really great I was not aware of this thing in outsystems.


Regards,

PAnkaj


Champion

Kilian Hekhuis wrote:

Hi Pankaj,

See attachment.

Hi Killian,

Can we have animation on this. right now it just navigating to the specific div without animation.


Regards

Pankaj


mvp_badge
MVP

Pankaj Pant wrote:

Kilian Hekhuis wrote:

Hi Pankaj,

See attachment.

Thanks, Kilian, it's working really great I was not aware of this thing in outsystems.


Regards,

PAnkaj



It's not part of outsystems, it's part of the html-spec!


mvp_badge
MVP

Pankaj Pant wrote:

Can we have animation on this. right now it just navigating to the specific div without animation.

Since this is just a link, you can't if you use it like this, not without some JavaScript trickery (but I'm not very versed in that).

Kilian Hekhuis wrote:

Hi Pankaj,

See attachment.

Hi,

Thanks for OML, How is it possible with Mobile?


regards,

Naveen


Hi Kilian,


Thanks for the help. I am able to do it. :)

mvp_badge
MVP

Great to hear Jace.

Hi all,

Is this possible if we're doing for Mobile application as I'm not able to find Escape content option in the latest version.

Champion

https://designshack.net/articles/html/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll/

This might provide some more information on how to get the animation working (as mentioned before this requires javascript/jquery)

Joey Moree wrote:

https://designshack.net/articles/html/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll/

This might provide some more information on how to get the animation working (as mentioned before this requires javascript/jquery)

Hi Joey,


How did you do this one? can you share oml or steps?


Champion

Abeer ElAssal wrote:

Joey Moree wrote:

https://designshack.net/articles/html/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll/

This might provide some more information on how to get the animation working (as mentioned before this requires javascript/jquery)

Hi Joey,


How did you do this one? can you share oml or steps?


Hey Abeer,

Wow this has been a long time, actually this can be solved quite easily.

In Outsystems 11 there's a new action called ScrollToElement (I think that's what it's called?)

And it will scroll nicely to the specified element.

For Outsystems 10 there are a few forge components suiting this requirement, one being AnchorScroll which I made myself haha.

https://www.outsystems.com/forge/component-overview/5826/anchorscroll


Hope this helps you out.

mvp_badge
MVP

Hi Aditya,

I'm not sure I understand your remark about Escape content. Escape content is a property on an Expression, but we're not using Expressions here at all.

mvp_badge
MVP

Hi Naveen,

You could check this Forge Component.

Kilian Hekhuis wrote:

Hi Naveen,

You could check this Forge Component.


Hi Kilian,

                 Thanks for the response. I done with Scripts. Its working.

TestPro.oml

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