Best way to make a custom table editable in Couch CMS

Question

Best way to make a custom table editable in Couch CMS

865 Views Asked by Bram Vanroy At 17 December 2014 at 18:57

I have an HTML table on one of my pages and I would like to make it editable for my client. It holds a working scheme so it is nice that if it changes they can use edit it themselves. The problem is that the table itself has an ID and it is wrapped in two others. That is necessary for some scripts and DOM manipulation I run. So I can't make the table itself editable, but making every single cell an editable region seems overkill. Is there an easier way? This is the necessary HTML for the table:

The first row (thead) shouldn't be editable, but all the other cells should be. Here it's in a fiddle.

<div id="tables-wrapper">
    <div id="overflow-table">
        <table id="data-table">
            <thead>
                <tr>
                    <th></th>
                    <th>Maandag</th>
                    <th>Dinsdag</th>
                    <th>Woensdag</th>
                    <th>Donderdag</th>
                    <th>Vrijdag</th>
                </tr>
            </thead>
            <tr>
                <td>Vrije raadpleging
                    <br>8u30 tot 10u30</td>
                <td>Dr. Z
                    <br>Dr. Y</td>
                <td>Dr. Z</td>
                <td>Dr. Y</td>
                <td>Dr. X</td>
                <td>Dr. Y</td>
            </tr>
            <tr>
                <td>Ochtend
                    <br><strong>op afspraak</strong>

                </td>
                <td></td>
                <td>Dr. Y</td>
                <td></td>
                <td></td>
                <td>Dr. X</td>
            </tr>
            <tr>
                <td>Namiddag en/of avond
                    <br><strong>op afspraak</strong>

                </td>
                <td>Dr. X
                    <br>Dr. Y</td>
                <td>Dr. Z
                    <br>Dr. X</td>
                <td>Dr. Z
                    <br>Dr. Y</td>
                <td>Dr. X
                    <br>Dr. Y
                    <br>Dr. Z</td>
                <td>Dr. Y
                    <br>Dr. X</td>
            </tr>
            <tr>
                <td>Vrije raadpleging
                    <br>van 17u30 tot 19u</td>
                <td>Dr. Y</td>
                <td>Dr. Z</td>
                <td>Dr. X</td>
                <td>Dr. Y</td>
                <td>Dr. X</td>
            </tr>
        </table>
    </div>
</div>

Original Q&A

There are 2 best solutions below

GXCPL.Official On 18 April 2016 at 18:28

@Bram Varoy: I don't know if this will be of any use so late, but nevertheless, thought of keeping the question answered.

This should be your PHP file content:

<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Doctor Appointment Schedule'>
    <cms:repeatable name='da_appt' label='Doctors Appointment - Slots' >
        <cms:editable name='da_appt_type' label='Slots - Type' type='text' />
        <cms:editable name='da_appt_mon' label='Slots - Mon' type='text' />
        <cms:editable name='da_appt_tue' label='Slots - Tue' type='text' />
        <cms:editable name='da_appt_wed' label='Slots - Wed' type='text' />
        <cms:editable name='da_appt_thu' label='Slots - Thu' type='text' />
        <cms:editable name='da_appt_fri' label='Slots - Fri' type='text' />
    </cms:repeatable>
</cms:template>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div id="tables-wrapper">
    <div id="overflow-table">
        <table id="data-table" border="1">
            <thead>
                <tr>
                    <th></th>
                    <th>Monday</th>
                    <th>Tuesday</th>
                    <th>Wednesday</th>
                    <th>Thursday</th>
                    <th>Friday</th>
                </tr>
            </thead>
            <cms:show_repeatable 'da_appt'>
            <tr>
                <td><cms:show da_appt_type /></td>
                <td><cms:show da_appt_mon /></td>
                <td><cms:show da_appt_tue /></td>
                <td><cms:show da_appt_wed /></td>
                <td><cms:show da_appt_thu /></td>
                <td><cms:show da_appt_fri /></td>
            </tr>
            </cms:show_repeatable>
        </table>
    </div>
</div>
</body>
</html>
<?php COUCH::invoke(); ?>

You can have any names that you want for the variables in the name='' of the

**user4368320** · Accepted Answer · 2014-12-17T19:46:45.210000

This looks like a perfect case for 'Repeatable Regions' - http://www.couchcms.com/docs/concepts/repeatable-regions.html

Define six 'text' or 'textarea' type editable regions (one for each <TD>) and them make them repeatable.

This way the user can keep adding as many rows as necessary while being able to edit each cell in every row.

On the front-end, use cms:show_repeatable to loop through the rows/cells and recreate your HTML table.

Hope this helps.

Best way to make a custom table editable in Couch CMS

There are 2 best solutions below

Related Questions in EDIT

Related Questions in COUCH-CMS

Trending Questions

Popular # Hahtags

Popular Questions