Made withOctober CMSTutorial

Making Websites With October CMS - Part 15 - Creating New Data via Form Widget

W

Watch and Learn

Creator on the October CMS channel

Watch on YouTube ↗

14K viewsOct 11, 201615:24 runtime

Learn how to create and save new related data from a form widget in October CMS. This tutorial covers handling many-to-many relationships by implementing the `getSaveValue` method to process submitted values. Discover how to debug Ajax requests using browser developer tools and…

Chapters

#octobercms#tutorial#cmscrm

Summary

This tutorial demonstrates how to enhance an October CMS form widget to dynamically create new database entries. The specific use case is adding a new actor to the database directly from a movie's edit form and associating it.

## Key Concepts

The `getSaveValue` Method

To intercept and modify data from a form field before it's saved, you can define a getSaveValue method in your form widget class. The method takes the raw value from the form as an argument.

public function getSaveValue($value)
{
    // $value contains an array of submitted IDs and new text strings
    // ... process the data ...
    return $processedIdsArray; // Return an array of IDs to be saved to the pivot table
}

Debugging Ajax Requests

Since the form saves via an Ajax request, you can debug the data being sent without a page reload.

Browser Developer Tools: Open the Network tab in your browser's developer tools to inspect the form submission request and see the response.
Dump and Die: Use Laravel's dd() (die and dump) function inside getSaveValue to stop execution and inspect the $value variable in the Preview or Response tab of the network request.

Processing Mixed Data Types

The core of the solution involves iterating through the submitted array and distinguishing between existing entries (numeric IDs) and new entries (text strings).

Existing Actors: Have numeric IDs.
New Actors: Are submitted as text strings (e.g., "John Wayne").

$finalIds = [];
foreach ($actors as $actor) {
    if (is_numeric($actor)) {
        // This is an existing actor ID, keep it.
        $finalIds[] = $actor;
    } else {
        // This is a new actor name (string), create it.
        // ... logic to create new actor model ...
        $finalIds[] = $newActor->id;
    }
}
return $finalIds;

Creating New Models Dynamically

When a text string is found, a new Actor model instance is created using standard Laravel Eloquent syntax.

Important
A simple explode(' ', $string) is used to split the name. This is a fragile approach and will not work correctly for names with middle names or single-word names. It is used for demonstration purposes only.

// Inside the 'else' block for non-numeric values
$nameParts = explode(' ', $actor); // Splits "John Wayne" into ["John", "Wayne"]

$newActor = new Actor();
$newActor->name = $nameParts[0];
$newActor->last_name = $nameParts[1] ?? ''; // Handle single-word names
$newActor->save();

// Add the new actor's ID to our array
$finalIds[] = $newActor->id;

Tip
This taglist form widget type is often better suited for simple, single-value data like tags, where you are comparing and saving simple strings rather than complex data objects like names.

Introduction: The Problem with Unsaved Data

So in the last episode, I told you that we needed to do something more to our phone widget because if we go to our movies right now and I'm on the Inception movie and I want to add another actor. So what we want here, if I add another actor, then I want to save that actor to the actors table. So if I do this, for example, John Wayne, it is right here, but if I save and close this and go to Inception again, as you can see, there is no John Wayne.

In this episode, I'm going to show you how you can save a new actor to your actors table via this form right here. And also, we are going to do some debugging of our application, which we already started to do in the previous episode when we used the dump function. But in this episode, I'm going to show you how you can debug the Ajax request of your form because whenever you click save, as you can see, the page doesn't refresh. It actually saves all of the data that it needs to in the background via Ajax. So I'm going to show you how you can debug that.

Before we start doing anything, let us first break down into steps what we actually need to do.

Planning the Solution

So first of all, we need to get the values. Then when we get the values, then we want to check out those values, see what we got and compare it to the other values that we already have in our database and see if the values that we are getting are actually of numeric or of textual type. So we compare the values because if someone writes something in our form widget, we will get the textual representation of it. All of the things that already are in our actor database, actually our actor table, we'll just get the IDs, so they will be the numeric data, and we will get from the name, of course, textual data. So we have to compare those values.

And then if we get some text from our values, then we need to save that to the actor model. And after that, so when we go through all the values, we need to create a new array with new values. So whenever you create a new instance of a model, so when you add a new actor, you get the ID for that actor, and we need to put that ID into an array that is going to be saved to our pivot table. So we need to get the values, compare those values, save the model, create a new array, and then that's about it. Then we create a new array, we send that array to October, and October does the rest for us.

Debugging Ajax with getSaveValue

So let's see what values are we currently getting. So to do that, we will use the method called getSaveValue and in that function or method, we are going to base a variable called actors.

Now, we can return those actors in this getSaveValue method, so we would just do something like that. And before that, we would do something with that data. So let's just see what we are getting here. So I'm just going to use a die and dump function that comes with Laravel and October and just see what we are currently getting when we save our form widget, so when we save the data from the form widget.

Okay, so dump and die actors. Let's see what we get. So I'm just going to refresh this page. And now in our console and our Chrome developer tools, we go to network and you just hit this two times to record what is currently going on. And for now, I'm not going to add anything right here. I'm just going to click save. And as you can see, we didn't get the message that the movie was updated because that function died and stopped. So nothing actually happened, nothing saved, but we can see the preview of what we are getting right here with that die and dump function. So as you can see, we are getting the IDs of actors one, two, and five.

Okay, so what would happen if I would add another actor right here? So John Wayne and click save again. So this is our other request. And if I click it, you will see that we get one, two, and five, and then John Wayne. Okay, so John Wayne is the only value that has some text in it. All of the others are numeric values.

Iterating and Processing Values

So what we need to do first is declare a new array. I'm just going to call it newArray and this is our empty array. Now we want to go through all of the actors, so the values that we got, so these right here, we want to go through all of them and check them against some condition. In our case, that condition is going to be: is the value numeric or not?

So I'm just going to do a foreach. So we are doing actors as actorID. Now we will have an actorID variable that we can check. So is it or isn't it not numeric? Now if it isn't numeric, then do something. Else, the newArray is equal to actorID. So we are putting that value into our new array. So in this case, that would be one, in this case, it will be two, here it will be five, and here it wouldn't be anything just yet because we need to do something right here. So that value isn't numeric, and we are not just going to put it in our new array, but we are going to do something with it first.

So we are going to create a new actor. Since this value is actually a string or text, we are going to create a new instance of an actor model. And I'm going to call it newActor. So we just do newActor = new Actor. Next thing, we need to add a name to that actor. So I'm just going to do this, I'm just going to hard-code the name for now so just so you can see what it is actually going on. So then we need the last name for that actor, and then we need to save the actor. Now that we have saved the actor, we have the ID of that actor. So we can say newArray equals newActor->id. So as I said, we already got these values hardcoded and we can just test this out to see if it works.

Verifying the Hardcoded Logic

So let's just see what we are getting from that request. So instead of dd actors, I'm going to do die and dump newArray. Okay, save it. Now if we go right here, refresh the page. Now remember, whatever name I add right here, it's always going to be John Cusack because we hard-coded his name right here. So I'm just going to record our request and add something, save it, and as you can see, now we have one, two, five, and six. So what is six? Six is actually John Cusack. If we go to our database and go to browse the data and check the actors table, as you can see, we have added John Cusack right here. And also, if we go here and check out the actors, we should see John Cusack right here. So this is the way we add new actors to our actors table via that form widget that we created in the previous episode.

Dynamically Creating Actors

Okay, let's go to movies, and now we have to do something with this so that it doesn't hard code John Cusack every time, but the actual name of the actor. Since we are getting those actors actually as a string representation, and they have a name and the last name, name and last name will be separated by a space. So I'm just going to create another variable called nameLastName and it's going to be equal to explode, and it's going to be using actorID variable.

Okay, so what we said right here: take the actorID and everything that is separated by a space, put it in an array. So this is an array name and lastName. And the first thing in that array, if we are using John Cusack as an example, would be John, and the second thing in that array would be Cusack. And we can actually demonstrate that if I just do die and dump right here and use name and lastName. Okay, save this. I'm just going to delete this new array, save it, go to our page, and if I add John Wayne, for example, and now save this, we get a request. And as you can see, so this is the array that we are getting. So this is the name and lastName array, and the first thing in that array, so by with number zero is John, and the second thing is Wayne.

So right here, instead of a newActor named John, we are going to say nameLastName[0], so that's the first thing in our array. And for the last name, it's going to be 1. And then we save the actor and save the ID of that actor to our new array.

Final Implementation and Result

And then pass out to October. So right here, I have to, instead of return actors, say return newArray and of course, get rid of this right here because if we leave it be, nothing will happen. Okay, so now we save this. Let's just refresh the page for good measure, and now let's try to add another actor, and I'll let it be John Wayne and click Save. As you can see, the movie is updated. If we cancel and go to Inception again, now John Wayne is in our actor list. Also, if we go to actors, we can see John Wayne right here. And then you can go in here if you have more data and fill out that data.

Important Caveats and Best Practices

Okay, so just a few things before we wrap up this video. So first of all, I forgot to mention, so this new Actor and new Actor->lastName, name, and whatever you want to assign to it, and then the save method right here, this is all pure and simple Laravel. So if you don't understand what this actually means, maybe just check out a little bit of Laravel documentation.

Another thing I want to mention, this isn't the best way to do these things because you can have an actor with three names like Bill Bob Thornton or something like that. So you have to account for that. And usually, this type of widget isn't used to save the values that have many parts. So like a name, so the name would have first name, last name, and so on. They're usually, this widget is usually used for tags, and tag would have only one line of text, and then you can compare that text to whatever text you have in the database. So you wouldn't actually save the ID, the value wouldn't be ID, it would actually be the name of that tag. So maybe be careful when doing something like this.

But this was just a demonstration of what you can do with this getSaveValue method. So you can do whatever you want here. Once you get the data from the form widget, you just take that data and you can mutate it into whatever you need it to be so that it will be that it will be saved to your database like you wanted to.

Conclusion and Next Steps

Okay, so this is it for this video. In the next video, we are going to be tackling components. So we learned how to create a form widget. In the next video, we are going to learn how to create a simple component for our plugin. I hope you like this video. If you did, please give it a thumbs up. If you like the content I put out, you can maybe subscribe to my channel. Also, you can follow me on Facebook or on Twitter and ask me questions there. Don't forget that everything we did here will be available for you on GitHub. The link will be in the description below so you can just download that code and play with it however you like. Okay guys, thank you for watching once again, and I will see you in the next episode.