Build a Single Page App with ACF Engine

In the latest version of ACF Engine Pro there is a new block type named Single Page App. This block type is used for building single page apps using a set of ACF Engine objects.

First you’ll need a post type. Most or all of our tutorials start with a custom post type! Although you might want a taxonomy or two in your final product, you don’t need one for this. Same for options pages… you can in fact skip all the way to Forms in the ACF Engine menu and make yourself a pair of forms. The front-end ACF forms we need are one for creation of new posts and the other for update/edit of existing posts.

In summary the basic setup of your SPA (Single Page App) objects is:

  1. Create a custom post type, for example “task”. Add an ACF field group to this post type. Take note of the ID of your ACF Field Group. Note this is a post ID for the “acf_fieldgroup” post type, so you can find it in the URL when editing the group, or when you hover over the edit link from the list of field groups. There is also a fieldgroup key that ACF creates, which you can use as well.
  2. Make a create form. This needs to have the “Create Post” settings added and under “Post ID” we use the keyword “new_post” to tell ACF to create a post rather than saving and existing post.
  3. Make an edit form. Do not specify “Post ID” in this form, leave it blank. This is because that important setting will be automatically set by the SPA block, and this one form will be used to edit any posts in our SPA so the Post ID is sent via JS when the user clicks edit.
  4. Make a page or post. You can use a custom post type so long as it has Gutenberg editor enabled. Add the “Single Page App” block. Fill out the form settings, using the keys you created in the previous steps. Enter the post type key as well. Click Publish and preview the post.
  5. Test your SPA. You should see the “Create Record” button at the top, clicking this should open the create form. Make a couple of test posts to ensure your create form is working. As you make posts they should appear in the record table with an edit button next to them. Click edit to make sure the edit form opens. This form should be populated with the post data, make a few changes and click save/update. The form should save the changes and the new data should appear in the posts table. Take note of any issues in this process, if any aspect of the operations fail double-check your settings in the SPA block, and in the create/edit Forms.

Leave a Reply