Multiple, nested, repeatable Components

Any changes in v4 for this?

2 Likes

totally agree!

I think Strapi looked promising, but this lack of nesting is definitely a show-stopper when it comes to setting up a grid based page-builder.

4 Likes

Nesting components is one of the most basic things the content editor would want to do. Without that possibilty every page just looks kind of the same.

3 Likes

Couldn’t agree more, unfortunately. :anguished:

I think that allowing for more levels of nested components would be another killer feature for strapi!

I imagine it would make the internals much more complex if an unlimited number of nested components was allowed. But a good compromise would be maybe 3 or 4 levels? More than that I guess it’s not that common. But there are many situations where it’s easy to reach 3-level deep nested components.

2 Likes

Did anyone try this out?
I had a requirement wherein the page has sections. Every section has two columns. Within each column, there is a dynamic zone.
I tried creating these relations in component (with code).

However, the next issue I’m facing is that the admin panel doesn’t support it.

Has anyone tried modifying the admin panel to support something like this?

Seems my Inception idea failed!

I have a hack-ey way. I’ll create one more fake component denoting section break. Let users keep adding all content to one dynamic zone. Every time there is a section break component, we’ll change from left to right or right to the next section.🤦

Without nesting at least 5 there is no way to use strapi in real-life projects. :frowning:

For example:
here is simplest navigation single component:


How come I can add page relation (see the arrow on the screenshot) but In UI after clicking the save button - I am not able to see any more saved value?
Is there any suggestion on how can I implement that navigation using relation?

@DMehaffy DMehaffy

2 Likes

There is a known bug about this. TBH with regards to navigation, it might be better to use a plugin for that such as:
https://market.strapi.io/plugins/strapi-plugin-navigation

hello @DMehaffy , what is the prediction of this bug to be resolved? I’m depending on this urgently on a project that is going into production.

Hi @Wesley_Castilho,

The PR has been merged and will be released with Strapi v4.2.0 on June 15th:

In the meantime you could apply it manually using patch-package.

1 Like

Hi @DMehaffy
I applied the patch using patch package and solution doesn’t work . Below is the structure I have for component.

I am able to see the fields for Icons components but when I fill and save, values get removed from the admin panel. I have checked the database and the values are being stored.
Here is the patch file

diff --git a/node_modules/@strapi/plugin-content-manager/server/services/entity-manager.js b/node_modules/@strapi/plugin-content-manager/server/services/entity-manager.js
index 059d4f7..2277816 100644
--- a/node_modules/@strapi/plugin-content-manager/server/services/entity-manager.js
+++ b/node_modules/@strapi/plugin-content-manager/server/services/entity-manager.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const { assoc, has, prop, omit } = require('lodash/fp');
+const { assoc, has, prop, omit, merge } = require('lodash/fp');
 const strapiUtils = require('@strapi/utils');
 const { ApplicationError } = require('@strapi/utils').errors;
 
@@ -40,15 +40,11 @@ const findCreatorRoles = entity => {
 };
 
 // TODO: define when we use this one vs basic populate
-const getDeepPopulate = (uid, populate, depth = 0) => {
+const getDeepPopulate = (uid, populate) => {
   if (populate) {
     return populate;
   }
 
-  if (depth > 2) {
-    return {};
-  }
-
   const { attributes } = strapi.getModel(uid);
 
   return Object.keys(attributes).reduce((populateAcc, attributeName) => {
@@ -60,7 +56,7 @@ const getDeepPopulate = (uid, populate, depth = 0) => {
 
     if (attribute.type === 'component') {
       populateAcc[attributeName] = {
-        populate: getDeepPopulate(attribute.component, null, depth + 1),
+        populate: getDeepPopulate(attribute.component, null),
       };
     }
 
@@ -71,7 +67,7 @@ const getDeepPopulate = (uid, populate, depth = 0) => {
     if (attribute.type === 'dynamiczone') {
       populateAcc[attributeName] = {
         populate: (attribute.components || []).reduce((acc, componentUID) => {
-          return Object.assign(acc, getDeepPopulate(componentUID, null, depth + 1));
+          return merge(acc, getDeepPopulate(componentUID, null));
         }, {}),
       };
     }

Please ignore the previous comment. The issue was, In one of the other component, I have used name tabs for some other repetable component. I believe that was conficlting and populate was not working. After renaming the value, it started worked.

I don’t think this should be ignored? Text fields with the same name work, but components don’t.

I’ve also had the same problem as @skovacic. It seems that when there are repeatable components with same key name, the latest one added overrides previous keys.

For example, if we create Table and then Grid, and both have repeatable components under key cells - Grid will override Table.