Highlight: WordPress integration

Important Notice
The features shown in this "highlights" blog category are a showcase of things which can be done using AppGini, AppGini Helper Library, PHP, SQL, Javascript, JQuery, CSS and HTML. This definately does not mean that everything you can see here is part of our product. It took hours, sometimes days of research, trial-and-error, coding and testing. So, these showcases are not part of a 49$ library, they are not single-line copy&paste codes and they are not for sale. Just a demonstration of what can be done and what we did and do in paid projects for our customers.

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.

Do you like it?