Custom Template - Two Column Add Page (v2025)

PHPMaker User Submitted Tips (PHPMaker)
1

In v2025, we have addpage2.xml file inside C:\Users\{User}\AppData\Roaming\phpmaker2025\code folder, for creating Custom Template with two column layout.

However, if the Add Page is displayed in narrow/mobile screen, the layout will always display 2 column which is not good for mobile friendly.

This following code will change that behavior. You may simply change all the code in that file with the following one:

<?xml version="1.0"?>
<ew-code name="Basic Add page (grid)" version="25.0.0" type="Custom Template" for="template" author="e.World">
<description>
<![CDATA[
##### Basic 2 Column Add page Custom Template by [Bootstrap Grid System](https://getbootstrap.com/docs/5.3/layout/grid/)
]]>
</description>
<script>
<![CDATA[
<#
    let fields = FIELDS.filter(f => f.FldGenerate && f.FldAdd && f.FldAutoUpdateValue === ""),
        fieldsPerRow = 2; // 2 fields per row
#>
]]>
</script>
<code>
<![CDATA[
<div class="container">
    <div class="row row-cols-auto">
    <# for (let f of fields) { #>
        <div id="r_<#= f.FldParm #>" class="col-sm-12 col-md-12 col-lg-6">
            <div class="row">
                <label for="<#= f.FldVar #>" class="col-sm-4 col-form-label">{{{caption <#= f.FldParm #>}}}<# if(f.FldReq){ #><?php echo Language()->phrase("FieldRequiredIndicator") ?><# } #></label>
                <div class="col-sm-8">{{{value <#= f.FldParm #>}}}</div>
            </div>
        </div>
    <# } #>
    </div>
</div>
]]>
</code>
</ew-code>

Last edited on December 12, 2024 by adding the Required mark for the related field(s).

3

Updated on December 16, 2024:

  • Added f.FldRequired logic; in addition to f.FldReq.
  • Removed unused fieldsPerRow runtime variable.
<?xml version="1.0"?>
<ew-code name="Basic Add page (grid)" version="25.0.0" type="Custom Template" for="template" author="e.World">
<description>
<![CDATA[
##### Basic 2 Column Add page Custom Template by [Bootstrap Grid System](https://getbootstrap.com/docs/5.3/layout/grid/)
]]>
</description>
<script>
<![CDATA[
<#
    let fields = FIELDS.filter(f => f.FldGenerate && f.FldAdd && f.FldAutoUpdateValue === "");
#>
]]>
</script>
<code>
<![CDATA[
<div class="container">
    <div class="row row-cols-auto">
    <# for (let f of fields) { #>
        <div id="r_<#= f.FldParm #>" class="col-sm-12 col-md-12 col-lg-6">
            <div class="row">
                <label for="<#= f.FldVar #>" class="col-sm-4 col-form-label">{{{caption <#= f.FldParm #>}}}<# if(f.FldReq || f.FldRequired){ #><?php echo Language()->phrase("FieldRequiredIndicator") ?><# } #></label>
                <div class="col-sm-8">{{{value <#= f.FldParm #>}}}</div>
            </div>
        </div>
    <# } #>
    </div>
</div>
]]>
</code>
</ew-code>
2 Likes
4

Would you Please edit this for Multi Page add page ?

5

Hi @cyrus,

Thanks for the feedback.

I actually have successfully made some .xml file in order to generate the Custom Template code that supports Two Column Layout,either for Add, Edit, View, Search, or Extended Search.

The good news is, beside it supports for basic Two Column Layout for Single Page, it also supports for Multi-Page feature for Add, Edit, View, and Search pages. Not only that, it also handles if some fields are setup to value of 0 from the Page No. under Fields setup → General. Last but not least, it also supports 2 direction to put the elements/controls on the form/page, either Top-Down or Zig-Zag, and each of it will be divided into the different .xml file, so that you may choose your desired direction.

Unfortunately, the bad news is, since I spent a lot of time, thought, and effort to do research, translate logic into written code, then implement every possible thing that could happen, and finally make sure all the functions work properly, I regret to say that this service is not free.

Thanks again for your understanding. :pray: :slightly_smiling_face:

2 Likes