Display Additional Fields in Appointments Table

Hi

Ok so I have the plugin installed and working almost as I want. I have added several additional fields to my Appointment Booking form and these are all required fields.

In class_app_shortcodes.php I locate the below data

$results = $wpdb->get_results( "SELECT * FROM " . $appointments->app_table . " WHERE (".$stat.") ORDER BY ".$appointments->sanitize_order_by( $order_by )." " );

$ret = '';
$ret .= '<div class="appointments-all-appointments">';
$ret .= $title;
$ret = apply_filters( 'app_all_appointments_before_table', $ret );
$ret .= '<table class="all-appointments tablesorter"><thead>';
$ret .= apply_filters( 'app_all_appointments_column_name',
'<th class="all-appointments-service">'. __('Service', 'appointments' )
. '</th><th class="all-appointments-provider">' . __('Referee', 'appointments' )
. '</th><th class="all-appointments-client">' . __('Requestor', 'appointments' )
. '</th><th class="all-appointments-date">' . __('Kick Off', 'appointments' )
// . '</th><th class="all-appointments-hometeam">' . __('Home Team', 'appointments' )
. '</th><th class="all-appointments-status">' . __('Status', 'appointments' ) . '</th>'
);
$colspan = 6;

$ret .= '</thead><tbody>';

if ( $results ) {
foreach ( $results as $r ) {
$ret .= '<tr><td>';
$ret .= $appointments->get_service_name( $r->service ) . '</td>';
$ret .= apply_filters('app-shortcode-all_appointments-after_service', '', $r);

$ret .= '<td>';
$ret .= $appointments->get_worker_name( $r->worker ) . '</td>';
$ret .= apply_filters('app-shortcode-all_appointments-after_provider', '', $r);

$ret .= '<td>';
$ret .= $appointments->get_client_name( $r->ID ) . '</td>';
$ret .= apply_filters('app-shortcode-all_appointments-after_client', '', $r);

$ret .= '<td>';
$ret .= date_i18n( $appointments->datetime_format, strtotime( $r->start ) ) . '</td>';
$ret .= apply_filters('app-shortcode-all_appointments-after_date', '', $r);

$ret .= '<td>';
$ret .= App_Template::get_status_name($r->status);
$ret .= '</td>';
$ret .= apply_filters('app-shortcode-all_appointments-after_status', '', $r);

$ret .= apply_filters( 'app_all_appointments_add_cell', '', $r );
$ret .= '</tr>';
}
}

If I want to add an additional column to the table to show one of the additional fields I configured how do I insert that? I appreciate col_span will need to increase and I have no issues with adding the column title. If it pulling the data from the database that is causing me the issue.

So the data I am looking to use is called ‘home team’

I have tried adding

$ret .= '<td>';
$ret .= $appointments->get_appointments_data( $r->hometeam ) . '</td>';

But this does not work. Any help would be appreciated.

Thanks

Wayne

  • Wayne
    • The Incredible Code Injector

    Hi

    Thanks for the quick response – I do want to pull several of the custom fields to the display tables on the appointments. Not sure if that makes a difference but if someone was able to give me an example of the coding for one Im happy to pick that up for the rest.

    Appreciate the help.

  • aristath
    • Recruit

    I’d advise you to start off by creating a custom template file on your theme for appoinments.

    You can see what your filename should be from this diagram: http://wphierarchy.com/ or this page on the WordPress codex: http://codex.wordpress.org/Template_Hierarchy#Single_Post_display

    You can then add these 2 lines in your custom template file so that you see all the metadata avalable:

    <?php

    $meta = get_post_meta( get_the_ID() );
    print_r( $meta );

    ?>

    This will simply prin on your screen all the post meta of the current post and you can then later query them using individually using the get_post_meta() WordPress function: http://codex.wordpress.org/Function_Reference/get_post_meta

    I hope that helps!

    Cheers,

    Ari.

  • Wayne
    • The Incredible Code Injector

    Hi

    I have duplicated a page template and added the code but then Im afraid my knowledge is limited in terms of what needs to be done to display additional fields. I have created a test page and assigned the new template layout to it. I have then placed the short code into the editor on the page to display the table and I now get

    Array ( [_edit_lock] => Array ( [0] => 1401536583:1 ) [_edit_last] => Array ( [0] => 1 ) [_wp_page_template] => Array ( [0] => templates/special-fixtures.php ) [panels_data] => Array ( [0] => a:0:{} ) [vantage_metaslider_slider] => Array ( [0] => ) [vantage_menu_icon] => Array ( [0] => ) )

    Printed followed by the table layout with appointments contained within it.

    I then have no idea how to add additional columns of the data if you a re able to confirm I have done everything right so far and what I need to now add and where to display different columns?

    Many Thanks

    Wayne

  • Saurabh
    • New Recruit

    Hi Wayne,

    Sorry for the delay here, but we have a solution for you!

    You don’t have to modify the plugin. You’d just need to either add the following as a new plugin (just put this in a new php file and upload that to your plugin folder) or in your theme’s functions.php:

    <?php
    /*
    Plugin Name: Additional fields Display in Table
    Description: Allows you to display additional fields entered by your users.
    Plugin URI: https://premium.wpmudev.org/project/appointments-plus/
    Version: 1.0
    AddonType: Users
    Author: Saurabh Shukla (Incsub)
    */

    add_filter('app_all_appointments_column_name','incsub_appt_add_field_display_col_name');
    function incsub_appt_add_field_display_col_name($head_html){
    // Repeat the following line for headers/column names
    $head_html .= '<th class="all-appointments-status">' . __('Home Team', 'appointments' ) . '</th>';

    return $head_html;
    }

    add_filter('app-shortcode-all_appointments-after_status','incsub_appt_add_field_display_field_value',99,2);
    function incsub_appt_add_field_display_field_value($x,$appointment){
    $appointments_data = get_option('appointments_data', array());

    $extra_html = '';
    $extra_fields = empty($appointments_data[$appointment->ID])? array(): $appointments_data[$appointment->ID];

    //repeat the following line for each extra fields, replacing hometeam with appropriate values
    $extra_html .= '<td>'.$extra_fields['hometeam'].'</td>';

    return $extra_html;
    }
    ?>

    This will display the additional column in the table generated with the shortcode. If you need to display additional columns for the other fileds, there are instructions in the code itself. Look for the lines that start with //.

    Do let us know if you need more help with this.

    Best

    Saurabh

  • Wayne
    • The Incredible Code Injector

    Hi @saurabh Shukla

    That works brilliantly – I am absolutely delighted with your assistance here and I have now got displayed everything I would like so really happy.

    I wonder – for the screenshot attached I have highlighted around the cells in the table with a red outline. Could the background of those cells be say yellow or amber for instance when the status is 'Pending' however when the status gets changed to Confirmed it changes a pale green and once completed it goes back to white?

    How could this be achieved please to easily identify the status of each appointment?

    Thanks

    Wayne

  • Wayne
    • The Incredible Code Injector

    One last thing in addition to the above – how can I look to make the layout better because as you can see all fields are on one line and the spacing is all over the place. Take a look at the last column header name – it doesn’t fit properly.

    It could perhaps be on two rows or laid out differently to better accommodate additional data?

    Thanks in advance

    Wayne

  • Saurabh
    • New Recruit

    Hi Wayne!

    Hope you are doing great, today! I’m sure glad that we could help you with the table.

    For the visual changes, I’ll need to have a look at the page, myself. Could you paste the url of the page here, so I could examine it in a little detail?

    Best

    Saurabh

  • Wayne
    • The Incredible Code Injector

    Hi @saurabh Shukla

    You will need to login with admin account to see all pages but support access is granted to allow this.

    There are four pages with tables included which are;

    http://www.dewsburybatleyrefs.co.uk/my-appointments/

    http://www.dewsburybatleyrefs.co.uk/pending-appointments/

    http://www.dewsburybatleyrefs.co.uk/confirmed-appointments/

    http://www.dewsburybatleyrefs.co.uk/completed-appointments/

    Many Thanks

    Wayne

  • Saurabh
    • New Recruit

    Hi Wayne,

    Thank you for the access.

    The columns are all misaligned because the plugin’s css puts the width of each column to 20%. (Since there are only 5 columns according to the plugin!)

    Your second requirement of styling each row according to the status is a tad difficult using css, since there is no css selector added to differentiate this.

    So, we have two options:

    1. Edit the plugin’s core files. This is easier and more efficient, but you’d have to redo these changes with an update. Although, I’ll try and get this added to the next update.

    2. Use some javascript based workarounds. With this, you won’t have to worry about updates.

    Do let me know which of these would you prefer and I’ll post a solution accordingly.

    Best

    Saurabh

  • Wayne
    • The Incredible Code Injector

    Hi @saurabh Shukla

    I think option one to edit the core files is fine and as long as I am aware of the changes I can always re-apply the changes should they not be covered in an update. You are always very good with the comments left in the code to make it easy to identify.

    Regards

    Wayne

  • Saurabh
    • New Recruit

    Hi Wayne,

    In that case, in class_app_shortcodes.php we can add the appointment status as the class name to the table row.

    So, at about line 730:

    $ret .= '<tr><td>';

    will become:

    $ret .= '<tr class="'.$r->status.'"><td>';

    We can then style rows according to status.

    To do that and to fix the column widths, we’d edit plugins/appointments/css/front.css at about line 486, there are these style definitions:

    .appointments-all-appointments table th,
    .appointments-all-appointments table td { width:20%; padding:1.5%; }
    .appointments-all-appointments .all-appointments-status { width:15%; }
    .appointments-all-appointments .all-appointments-date { width:25%; }

    The width parameter is the one we’d adjust to get the desired width for each column. Note that the status column and the date column have their own special widths defined. We can do that in our custom plugin’s code that I have provided in a post above. at about line 14:

    $head_html .= '<th class="all-appointments-status">' . __('Home Team', 'appointments' ) . '</th>';

    Change it to

    $head_html .= '<th class="all-appointments-hometeam">' . __('Home Team', 'appointments' ) . '</th>';

    and so on for each column. After that, we can style each columm independently. You can add style definitions after the ones above, like this:

    .appointments-all-appointments .all-appointments-hometeam { width:20%; }

    and adjust the width to your liking.

    Now, to style rows differently based on status, after all these definitions, add the following:

    /* styles for rows */
    .appointments-all-appointments table tr.paid{background-color:#E1F5A9}
    .appointments-all-appointments table tr.confirmed{background-color:#E1F5A9}
    .appointments-all-appointments table tr.pending{background-color:#E1F5A9}
    .appointments-all-appointments table tr.completed{background-color:#E1F5A9}
    .appointments-all-appointments table tr.removed{background-color:#E1F5A9}
    .appointments-all-appointments table tr.reserved{background-color:#E1F5A9}

    and adjust the colours. (I have added the same color to each for demonstration.)

    You can get color values from a photo editing tool like photoshop or GIMP, or from a website llike http://html-color-codes.info/

    Do let me know how this works out.

    Best

    Saurabh

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.