How to install Gridelments with FLUIDTEMPLATE and flexform , TYPO3 9.5.13 , Gridelements 9.4.2

First if you remember the backend layout design in typo3 using grid this is same but the method is changed, Now you dont need to add CE Backend Layout in backend you just want to add Typoscript of that wizard to page Typoscript  and it will loaded autometicaly in content Element

You can see that in our layout typoscript you have to just remove part of backend_layout so it will look like config{}

Gridelement ce backend layout you can see below just add it in page ts gridelements will load automatically 

tx_gridelements.setup{
     oneColumnFlex {
     title = One Column Container Flexform
    icon = EXT:your_extension/Resources/Public/Icons/gridelements.svg
description = One Column Container Flexform
flexformDS = FILE:EXT:your_extension/Configuration/FlexForms/Gridelements/simple.xml
    config {
        colCount = 1
        rowCount = 1
        rows {
          1 {
            columns {
              1{
                name = Content
                colPos = 1
              }
            }
          }
        }
    }
  }

}


in above code you can also use fileadmin/Resource/Gridelements/simple.xml path or your own path instead of EXT:your_extension/


Now check your content Element->Gridelements you will find one 

Now lest add FlexForm code inside simple.xml

<?xml version='1.0' encoding='utf-8' standalone='yes' ?>
<T3DataStructure>
<ROOT type='array'>
<type>array</type>
<el type='array'>
<class type='array'>
<TCEforms type='array'>
<label>css custom class</label>
<config type='array'>
<type>input</type>
<size>40</size>
<eval>trim</eval>
</config>
</TCEforms>
</class>
</el>
</ROOT>

</T3DataStructure>

Above i have just add one field name class which start from <class type="array">--</class> you can add latter more field 

Now lets see in backend 

You can see input field is displaying now, Lets add Typoscript for frontend rendering

In TYPO3 Backend 

Template->rootpage->info/Modify setup field add Typoscript or you can also add this line in typo3 extension gridelements setup.typoscript file 

tt_content.gridelements_pi1.20.10.setup {

oneColumnFlex < lib.gridelements.defaultGridSetup

    oneColumnFlex{

        cObject = FLUIDTEMPLATE

        cObject {

            file = EXT:your_extension/Resources/Private/Templates/Extension/Gridelements/oneColumnFlex.html

        }

    }

}

Now add this code 

in oneColumnFlex.html file as we define above 

<div class="row {data.flexform_class}">

    <div class="col-lg-12 ">

        <f:format.raw>{data.tx_gridelements_view_column_1}</f:format.raw>

    </div>

</div>

here flexform_ prefix and class is our field name, 

data.tx_gridelements_view_column_1 here 1 is our colpos 

Thank you for visiting my blog if any suggestion just comment or contact me