For an upcoming project we plan to integrate data from an AppGini application into a WordPress page. I am currently creating a prototype to determine the feasibility.
Components
On the one hand, we need a configurable WordPress plugin that retrieves the data. On the other hand we need a counterpart on AppGini side, which provides the data.
WordPress output
This is what the first results look like. Please note that I have not made the result list prettier yet. More CSS styling is still required here. It is just the first draft:
This is a WordPress installation on localhost. The whole page has been rendered by WordPress. Here we can use all possibilities, for example different themes, menus, sidebars and so on.
The lower part starting from the heading Mitarbeiter (Employees) is dynamically loaded from an AppGini custom-page via AJAX and displayed using JQuery/Javascript.
Fields
You can see in the example that the fields name, description and picture are loaded and displayed properly.
Paging
Also the paging works already. For the screenshot above I set that only two records should be displayed per page. This is great for testing and already configurable.
For the next, short video I have set records per page to 1 so we can navigate through all (3) records:
Permissions
When I am logged in to AppGini, for example in a different Tab, I will see the records I am allowed to see. When I am logged out, I will see either no records or only those that were explicitely allowed to the Anonymous group.
This means using the AppGini built-in permission system and the group Anonymous I can control the visibility of records in AppGini and in WordPress.
Edit-Mode
This is the edit-mode of that WordPress page:
On the WordPress side, the plugin provides a so-called "Shortcode". I only pass the URL of my AppGini installation and the name of the table I want to show. The rest is done by the plugin and by a custom page in my AppGini installation.
AppGini Data source
And this is the underlying AppGini table view / detail view:
Table View
Slightly customized with additional buttons in the first column using our AppGini Helper Javascript Library.
Detail View
Slightly customized with tabs and multi-column layout using our AppGini Helper Javascript Library.
Challenges
URLs
In this example WordPress and the AppGini application are on the same server. This is easy when it comes to resolving URLs, for example the address of the picture. The image could theoretically be on a completely different server, where WordPress is not allowed to access the images directory.
Search integration
Not solved, yet. I would like the WordPress search function to find the AppGini records as well. But I'm afraid that I have to insert certain data values into the WordPress database, which I don't like because of the data volume, performance and missing update.
Customization
In this prototype I have to configure everything via PHP. This is fine for my project. A reusable solution might need more UI.
Prospect
If I basically like this WordPress integration and if it is suitable for the upcoming project, I will work out further possibilities:
- Templates with placeholders for output
- List-Display, Grid-Display (Portfolio), Table-Display, (single) Item Display
- Search functionality (see above)
- Quickfilters like for first characters of lastname:
[ A-C ] [ D, E ] [ F-H ] ... [Sch] ...
By the way
This prototype WordPress plugin also contains a shortcode for integrating the whole AppGini application itself:
Table View integrated in WordPress:
Detail View integrated in WordPress:
In the example pictures above you can see that I have hidden the navigation bar for these purposes.