617
Views
16
Comments
Solved
Customizing the Pagination | Reactive Web application
Application Type
Reactive

Hello Everyone,

 I want to customize the pagination by adding an input field which will take input from use to show number records on a single page.

I am attaching the screenshot for better understanding.

Any help would be appreciated.

Thanks in advance.



Pagination.png
2021-06-02 20-50-04
Márcio Carvalho
Solution

Basically, i put a placeholder on the pagination! and I did everything behind the component pagination. And this way I can control the max records and have the dropdown and everything on the pagination component.

If this is what you want. You should go with this. But Benjith Sam's answer is also correct!!

Try this link

https://marcio-carvalho4.outsystemscloud.com/maxrecordsperpage/Product?_ts=637765506714281432

Let me know if I could help you.

maxrecordsperpage.oml
2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Abhinav,

If I understood your use case correctly, I think you can get it working by modifying the MaxRecords Aggregate property value based on the user input.

See this sample: TableRecordsDemo

Refer to the attached .oml file


I hope this helps you!


Kind regards,

Benjith Sam

RWA_Lab_Dynamic_Pagination.oml
2021-06-02 20-50-04
Márcio Carvalho

Thanks, Benjith Sam as always. you are one of the greatest <3 

Kind Regards,

Márcio

2025-04-17 05-42-16
Ajit Kurane

Great!! Thats working like charm. coding master.

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

Kudos to you @Marcio. Appreciate your contribution :)

Thank you @Ajit


Kind regards,

Benjith Sam

2023-01-19 12-23-07
Abhinav Shilwant

@Benjith Sam @Marcio Thank you for the solution. Much appreciated!!

Happy New Year to everyone!

Regards,

Abhinav

2021-06-02 20-50-04
Márcio Carvalho

No problem! Glad that we could help!

Wish you a great year!

Regards,

Márcio

2021-06-02 20-50-04
Márcio Carvalho

So, to do that, you will need to go to the outsystems UI and clone the pagination. You will do a custom of the pagination and there you will include that piece that you want.

Go there!

If anyone has a better way, please feel free to say.

Regards,

Márcio

2025-04-17 05-42-16
Ajit Kurane

If user enter 10 in input field in pagination then only 10 records should display on screen from 1-100. How can we build logic for this one ?

If you have any solution then please provide us.

2023-01-19 12-23-07
Abhinav Shilwant

Thanks @Marcio I'm already on it. I am building the logic to implement this. Having Blockers in that. If you have any idea you can share it.


2021-06-02 20-50-04
Márcio Carvalho

I don't know if it works, because you need to be with the data inside of the component... or you need to do the component inside of the screen. the only way to do what you want is by building a special component for your use case where it has the table and the pagination or by putting a button outside of the pagination saying how many records you want to see on the screen.

I was able to do this. But I cannot pass the max records outside of the component pagination. To refresh the number of records on the table.

That's why I am saying that the pagination should be done at the same level of the table, to us to be able to include the max records selected on the dropdown.

The easiest way is to create an input or dropdown as I created and put it outside of the pagination, and that will take the max records and refresh the table without any problems.

Regards,

Márcio

2023-01-19 12-23-07
Abhinav Shilwant
2021-06-02 20-50-04
Márcio Carvalho
Solution

Basically, i put a placeholder on the pagination! and I did everything behind the component pagination. And this way I can control the max records and have the dropdown and everything on the pagination component.

If this is what you want. You should go with this. But Benjith Sam's answer is also correct!!

Try this link

https://marcio-carvalho4.outsystemscloud.com/maxrecordsperpage/Product?_ts=637765506714281432

Let me know if I could help you.

maxrecordsperpage.oml
2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Abhinav,

If I understood your use case correctly, I think you can get it working by modifying the MaxRecords Aggregate property value based on the user input.

See this sample: TableRecordsDemo

Refer to the attached .oml file


I hope this helps you!


Kind regards,

Benjith Sam

RWA_Lab_Dynamic_Pagination.oml
2021-06-02 20-50-04
Márcio Carvalho

Thanks, Benjith Sam as always. you are one of the greatest <3 

Kind Regards,

Márcio

2025-04-17 05-42-16
Ajit Kurane

Great!! Thats working like charm. coding master.

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

Kudos to you @Marcio. Appreciate your contribution :)

Thank you @Ajit


Kind regards,

Benjith Sam

2023-01-19 12-23-07
Abhinav Shilwant

@Benjith Sam @Marcio Thank you for the solution. Much appreciated!!

Happy New Year to everyone!

Regards,

Abhinav

2021-06-02 20-50-04
Márcio Carvalho

No problem! Glad that we could help!

Wish you a great year!

Regards,

Márcio

UserImage.jpg
Evil Freaky

Hi @Benjith Sam  and Marcio,

For Traditinal Web

I cannot pass the Max record value inside the Pagination without Clone. Is it possible?

Kindly give me Suggestions.



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

Hi,

You will have to define a local variable e.g., LineCount of integer data type and map it with the TableRecords widget's Line Count property as highlighted below:


On InputOnChange - Refresh the associated aggregate and then the TableRecords wrapper container.

Demo Screen: Table_DynamicRow

I hope this helps you!


Kind regards,

Benjith Sam

UserImage.jpg
Evil Freaky

Hi @Benjith Sam 

Really thanks a lot for Prompt response, Yeah, I can understand if you have oml, kindly share me for better understanding Thank you so much


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

Hi,

You're welcome. Glad to help you :)

Refer to the attached oml.


Kind regards,

Benjith Sam

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