How would you create a dynamic repeater? Details below

[glaprida]

I am trying to create a dynamic component that gets its info (text and images) from an api dynamically, but you can still style each element, reorder elements, etc.

For example, a Product List component, that when mounted ( editor.on('component:mount') ) fetches data and adds the corresponding components inside.

My main issues when trying this are:

• It's a dynamic REPEATER, that means that I will get as a result an array of Products, and will append each one of them inside the Product List component. So far so good, but I need this (now independent) Product components so by in sync with each other. If I reorder the components INSIDE one Product, all Products should do the same.

• Also... since I am doing editor.on('component:mount') and "manually" adding the components; whatever changes I made are unmade when I reload (because its re-mounting and its setting the inner components once again. Style changes are preserved (at least while working with private classes and componentsFirst: false)

• Finally... I don't really need to save all of the child components of my main dynamic element (Product List), what I would like instead is to save a Template, that when exported and viewed from a browser (the published website) it makes the api call and appends all the content based on that template. Basically I don't need to overload the save/load in the editor when having 500 products.

I hope I was clear enough... for those of you familiar with Webflow, it's basically the CMS Collection Element behaviour that I am trying to replicate

Thanks!

[ronaldohoch]

I think you can fetch the data from server in view init of the component 🤔

https://grapesjs.com/docs/modules/Components.html#lifecycle-hooks

[glaprida]

I have done this already, so I wanted to share an overview of our approach. (I'm not sharing the whole code... just a simplified version of the flow, so beware of errors if you just copy and paste this code)

I have a CollectionList component, with a Source trait (datasrouce attribute) with different options which are mapped to endpoints on our API.
inside the CollectionList component I have:

model:{
  defaults:{...},
  init(){
    this.on('change:attributes:datasource', this.fetchData)
  },
  fetchData(){
    //fetch data using the datasource value
    APIcall('get',{source:this.attributes.datasrouce},function(response){ //APIcall is a fake function that makes the request
      // "save" the stringified JSON response on a data attribute
      this.attributes.dataContent = JSON.stringify(response) //example of response at the end
      
      //once we have the data, we use it to create the necessary components
      this.updateCollection()
    })
  },
  
  
  updateCollection(){
    //read the 'stored' data
    let data = JSON.parse(this.attributes.dataContent)
    let collectionItems = []
    
    //create one CollectionItem per array key in data
    data .forEach((item,index) => {
      collectionItems.push(
        {type:'CollectionItem'}
      );
     });

     //set these components as children of CollectionList
     this.components(collectionItems);
  },
  
  // the code from here below is about syncing elements inside CollectionItems
  // FIRST we should sync adding, moving and removing elements.
  
  let initialIndex = null;
  let isCollectionItemChild = false

  /* cache the index and parent of the dragged component */
  editor.on('component:drag:start', (ev) => {
      initialIndex = getParentIndex(ev.target,[])
      isCollectionItemChild = ev.target.isChildOf('CollectionItem');
  });

  /* sync newly added or moved components */
  editor.on('component:update:components', (parent, comp,ev) => {

     if(comp.isChildOf('CollectionItem') ){
          // this line allows the elements inside a CollectionItem to be moved ONLY INSIDE its collectionItem parent
          //(otherwise you can make a mess by moving something from one item to another)
          
          let collectionItem = comp.closestType('CollectionItem');
          comp.set('draggable', `#${collectionItem.ccid}[dataCollectionItem], #${collectionItem.ccid}[dataCollectionItem] *`) 
            
          if(collectionItem.contains(comp)) {
              if(!isUpdating){
                
                isUpdating = true;
                
                if( isCollectionItemChild ){
                  // MOVED element
                  syncMoveComponent(comp,initialIndex)
                  initialIndex = null;
                  isCollectionItemChild = false;
                }else{
                  //NEW element 
                  // it can be a truly new element
                  // or some element dragged from outside the CollectionList into the CollectionList)
                  syncAddComponent(comp)
                }
                setTimeout(() => isUpdating = false, 1);
            }
        }

    }
});

/* sync removed components */
editor.on('component:remove:before', (comp) => {

   if(comp.isChildOf('CollectionItem') && !isUpdating){
      isUpdating = true;
      syncRemoveComponent(comp)
      setTimeout(() => isUpdating = false, 1);
    }
});

  
  // THEN we should sync any changes on existing CollectionItem children elements
  // if the user types something on a 'static' text, it should sync across all CollectionItems
  editor.on('component:input', function(comp){
      const closestCollectionItem = comp.closestType('Collection Item');
      const closestList = comp.closestType('Collection List');
          
      if(closestCollectionItem && closestList && !isUpdating){
            isUpdating = true;
            syncText(comp)
            setTimeout(() => isUpdating = false, 1); 
      }
   });
  
  // the user can also chose a 'dynamic source' for each text element, showing a value inside the response instead of a static text
  // this is achieved by adding a Select Trait to all text elements that are children of CollectionItem with possible values 
  // (eg. name, description, etc)
  // this is achieved on the text component itself.
  

  // I also have events and functions to sync styles, classes, and attributes that I'm not gonna go into here...
}

Here I share some of those sync functions:

// helper function to recursively get the parent's index until the collectionItem element
const getParentIndex = (c,indexesArray) =>{

  if(indexesArray == undefined || indexesArray.length == 0){
    indexesArray = [c.index()]
  }else{
    indexesArray.unshift(c.index())
  }

  if(c.isChildOf('Collection Item')){
    let parent = c.parent()
    if(!parent.isInstanceOf('CollectionItem')){
      return getParentIndex(parent,indexesArray)
    }else{
      return indexesArray
    }
  }else{
    return indexesArray
  }
}

//sync newly appended components across all collection items
export const syncAddComponent = (comp) =>{
  let index = comp.index();

  let closestItem = comp.closestType('Collection Item');
  let closestList= comp.closestType('Collection List');

  let indexToSelect = getParentIndex(comp,[])
  indexToSelect.pop()

  closestList.findType('Collection Item').forEach((item)=>{
    if(item.cid != closestItem.cid){
      let targetComp = item;

      if(indexToSelect){
        indexToSelect.forEach((index) => {
            targetComp = targetComp.getChildAt(index);
        });
      }
     
      let newComp = comp.clone();
      targetComp.append(newComp, {at: index} );
    }
  }) 
}

//sync removed components across all collection items
const syncRemoveComponent = (comp) =>{
  let index = comp.index();

  let closestItem = comp.closestType('Collection Item');
  let closestList= comp.closestType('Collection List');

  let indexToSelect = getParentIndex(comp,[])
  indexToSelect.pop()

  closestList.findType('Collection Item').forEach((item)=>{
    if(item.cid != closestItem.cid){
      let targetComp = item;

      if(indexToSelect){
        indexToSelect.forEach((index) => {
            targetComp = targetComp.getChildAt(index);
        });
      }

      targetComp.getChildAt(index).remove();
    }
  }) 
}

//this function syncs the text across all collectionItems as you type
const syncText = (comp) =>{
  let closestList = comp.closestType('Collection List');
  let closestListItem = comp.closestType('Collection Item');
  
  let baseContent = comp.view.el.innerHTML;
  let indexToSelect = getParentIndex(comp,[])
  
  closestList.findType('Collection Item').forEach( (item)=>{
    if(item.cid != closestListItem.cid){
      let targetComp = item;

      if(indexToSelect){
        indexToSelect.forEach((index) => {
            targetComp = targetComp.getChildAt(index);
        });
      }

      targetComp.view.el.innerHTML = baseContent
    }
  });
}

On the other hand, my text components all extend from 'dynamicText', which on init() check if they are children of CollectionItem.
If thats true, it shows the source traits, and when the source changes, I run a setDynamicText function thats detailed below.

setDynamicText(){

      if( this.model.isChildOf('CollectionItem')){

        let collectionItem = this.model.closestType('Collection Item')
        
        if(this.model.attributes.attributes.datasource){
          let collectionList = this.model.closestType('Collection List')
          let itemIndex = collectionItem.index()
          let dataList = JSON.parse(collectionList.attributes.attributes.dataContent)

          //this is the selected key (eg. name, description, etc) and it should exists on the json data
          let itemSrc = this.model.attributes.attributes.datasource;
         
          let dataContent = dataList[itemIndex][itemSrc];

          this.model.view.el.innerHTML = dataContent;
          this.model.attributes.editable = false;
       }else{
           this.model.attributes.editable = true;
      }
   }
},

By the way, I have made this work for all kind of components, such as images with dynamic sources, videos, etc.

I'll share a video of the working editor on a later comment.
Hope it helps somebody!