Bootstrap datagrid Integration

(2) Share

Report

Posted on by Henil

I have one demo code for Bootstrap datagrid view. My Requriment is that as per demo code I want to display records in Portal from Contact table but using prebuilt Bootstrap datagrid. so if there is 10 select then it will call api display 10 records and also Pagination is include in Below demo code with prebuilt Bootstrap datagrid. so using pagination it skip selected record and call api then get 10 records but here i just give example selected record 10 but it should be dynamic as per bootstrap datagrid view. This is demo code but help me for implement dynamic for contact table using Bootstrap datagrid table and call web api Server Side using skip and token. Thanks in advance for helping..

Please see attached file for demo code.

Categories:

General

Screenshot 2025-0...

Demo Bootstrap Da...

I have the same question (0)

All responses (4)

Answers (0)

Henil 2 on at

Like (0)

Report

Bootstrap datagrid Integration

Hi @DP_Prabh,

Thanks for sharing but could you help me I don't want perform CRUD operation but only display records using web api and Directly server side per selection and per pagination call web api then then display only those records.

Was this reply helpful? Yes No
Suggested answer

DP_Prabh 21 on at

Like (0)

Report
Bootstrap datagrid Integration

Hello,

If you're looking to retrieve data from Dataverse using the Web API within your existing Bootstrap code, I recommend checking out the following resources that were helpful to me and might work well for you too:

Microsoft Documentation: [Portals Web API write, update, and delete operations | Microsoft Learn]

Blog Post: [Web API for CRUD operations - Rishan Solutions]

Additionally, if you're not familiar with writing AJAX functions, you can use the Dataverse REST Builder extension. It generates the AJAX code for you, which you can then paste directly into your Power Pages web page.

Here’s the link to the extension on the Microsoft Edge Add-ons store:
[Dataverse REST Builder - Microsoft Edge Addons]

Hope this helps!

Was this reply helpful? Yes No
Henil25 6 on at

Like (0)

Report

Bootstrap datagrid Integration

Hi @Jon Unzueta thanks but it is not working i want to display fullname and emailaddress1 in portal and I added all Table Permission and Site Setting. could you have idea that how call web api?

Was this reply helpful? Yes No
Suggested answer

Jon Unzueta 1,215 Super User 2025 Season 2 on at

Like (1)

Report
Bootstrap datagrid Integration

1. HTML con Bootstrap Table

Usa Bootstrap Table para facilitar la paginación del lado del servidor:

2. JavaScript para llamadas a la Web API

$('#contactTable').bootstrapTable({

    ajax: function (params) {

        const pageSize = params.data.limit;

        const offset = params.data.offset;

        const token = "YOUR_ACCESS_TOKEN"; // Usa el token del portal si es necesario

        fetch(`https://yourorg.crm4.dynamics.com/api/data/v9.2/contacts?$top=${pageSize}&$skip=${offset}&$count=true`, {

            headers: {

                "Authorization": `Bearer ${token}`,

                "Accept": "application/json"

            }

        })

        .then(response => response.json())

        .then(data => {

            params.success({

                total: data['@odata.count'],

                rows: data.value

            });

        })

.catch(error => {

            console.error("Error fetching contacts:", error);

            params.error(error);

        });

    }

});

3. Configuración del Web API

Asegúrate de que el endpoint incluya ?$count=true para obtener el total de registros.

Usa $top para el número de registros por página.

Usa $skip para omitir los registros ya mostrados.

4. Seguridad y Autenticación

Si estás en Power Pages, puedes usar Web API con tokens del portal.

Alternativamente, puedes crear una Web API personalizada en Power Platform que actúe como proxy.

🏷️ Tag me if you have any further questions or if the issue persists. ✅ Click "Accept as Solution" if my post helped resolve your issue—it helps others facing similar problems. ❤️ Give it a Like if you found the approach useful in any way.

Was this reply helpful? Yes No

Community site session details

Bootstrap datagrid Integration

1. HTML con Bootstrap Table

2. JavaScript para llamadas a la Web API

3. Configuración del Web API

4. Seguridad y Autenticación

Helpful resources

News and Announcements

Quick Links

Responsible AI policies

Telen Wang – Community Spotlight

Congratulations to the July Top 10 Community Leaders!

Leaderboard > Power Pages

Featured topics

Product updates

Community site session details

Bootstrap datagrid Integration

1. HTML con Bootstrap Table

2. JavaScript para llamadas a la Web API

3. Configuración del Web API

4. Seguridad y Autenticación

Helpful resources

News and Announcements

Quick Links

Responsible AI policies

Telen Wang – Community Spotlight

Congratulations to the July Top 10 Community Leaders!

Subscribe to this forum!

Select categories

Leaderboard > Power Pages

Featured topics

Product updates