3

Strapi Version: v4 Operating System: macOS Database: MySQL Node Version: 16.15 NPM Version: 5.8.8

I am trying to populate a field based on the value in other fields. Example: I have a content type with fields city = Mumbai and country = India, now I need a third field called market which should have the value Mumbai - India (i.e. value of city field + “-” + value of country field).

I'm relatively newer to strapi and still exploring the tool, Can someone please help me with this?

1 Answer 1

8

This is pretty simple to achieve with the help of Strapi's Model Lifecyle Hooks.

Step 1:
Firstly, add the city, county & market fields to your collection type via the Content-Type builder.

Step 2:
Now, you need to make the field read-only to make sure that nobody gets to manually populate the field via the admin UI. You can do this by visiting any entry from your collection and then clicking on the Configure the view option from the right hand pane.

enter image description here

Step 3:
Next, click on the edit icon against the market field. You will be presented with a popup similar to the below screenshot. Make the field as Editable false and click on finish. Once this is done, make sure you click on the Save button shown in the top right hand side corner of the page to permanently save your changes.

enter image description here

Step 4:
Next, override the beforeCreate & beforeUpdate lifecycle hooks of the model to auto-populate the market values while entries are created/updated. To do this, you'll have to create a lifecycles.js file in the following folder: ./api/[api-name]/content-types/[content-type-name]/

Let's say your collection name is Student.

// src/api/student/content-types/student/lifecycles.js

module.exports = {
    beforeCreate(event) {
    if (event.params.data.city && event.params.data.country) {
      const { city = "", country = "" } = event.params.data;
      event.params.data.market = city + " - " + country;
    }
  },

  beforeUpdate(event) {
    if (event.params.data.city && event.params.data.country) {
      const { city = "", country = "" } = event.params.data;
      event.params.data.market = city + " - " + country;
    }
  },
};

Step 5:
That's it! Restart your strapi server and try creating or updating new entries in your collection. It should automatically populate the market value based on the city & country values.

Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for a detailed answer Salvino, it really helped me make some progress. Though the solution is fine until I publish my content, it populates the field with a value "undefined-undefined" once I hit the publish button. Do you know why it might be happening?
@grvkgp I've updated my answer. So the issue is that when you publish an entry, the beforeUpdate event is triggered with just the publishedAt & updatedAt times. You can easily solve this by surrounding your code with an if condition that checks for valid values before updating. Also, please accept this answer so that it may help others in future.
also, I was taking a look at your answer here: stackoverflow.com/questions/70674721/… Can you please help me understand it a little to achieve the same using python?
Sorry brother, I don't posses prior knowledge of python. :-(

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.