user list

This article explains how to build a member site with Joomla core and DPFields only. For a NGO site I maintain, the board wants to display their members on the front with a simple list. We used Community Builder for quite some time, but it slowed down our site. It loads tons of javascript and CSS files and bloats the content. Additionally it had some features we will never use and the management was quite difficult for the none tech users. Finally the point where we decided to move to a more lightweight solution was, as we wanted to open registration for all visitors. It just didn't work, it always redirected to the login module after registration, but the user didn't get created. So I told myself, either way you are going to fix something you want to get rid of it anyway or look for a different solution. We decided to go with Joomla core. Users will be the user management, Contacts the front end list and DPFields will be the custom fields replacement of Community Builder.

User management

As user management we are using Joomla's user manager. We organize the users in the groups we needed with different access levels and so on.

user list backend

Custom fields

To have custom fields for the users, we installed DPFields. Like that we can create as many custom fields we need for our users. More documentation about DPFields can be found here. These custom fields can then be edited by the user itself on the front when editing his/her profile information. Through the permission levels we can also control who can edit the values of the custom fields. This was not possible with Community Builder as they don't use the Joomla's ACL features.

user list custom fields

Contacts management

As we have only a menu item type to show a list of contacts and not users, we need to create for every user a contact. There is a Joomla core plugin Contactcreator which creates for every new user a contact automatically in specific category, we could use that one for sync. By commenting out that line the plugin created a new contact for the updates also. As we had to manually update every user by hand to move the custom fields data from community builder to DPFields, contacts were created for the existing users.

user list ccplugin

Member list

To create the member list for the front, we created a contacts category menu item. To have the list with the fields we need from the user including the custom fields, a template override was needed. Template overrides let the admin to adapt the views to their needs, more information can be found in the official Joomla documentation. In our case we had to copy the file components/com_contact/views/category/tmpl/default_items.php to templates/{template}/html/com_contact/category/default_items.php.

To put the custom fields into the list, we used the following code snippet:

JDispatcher::getInstance()->trigger('onContentPrepare', array ('com_users.user', &$user, &$item->params, 0));
foreach ($user->dpfields as $field)
{
	if ($field->note != 'front')
	{
		continue;
	}
	echo '<br/>' . $field->value;
}

The if condition allows us to display only the fields which have as not value "front" on the member list site. With some more code changes we got a stripped list and nice avatars. How we implemented avatars will be explained later.

user list front

Member detail page

For the contact details page, we used again a template override and some configuration options from the contacts manager. Like that you can control if the contact form should be displayed or not, to let the visitors get in touch with the members.

To adjust the details page, we had to create a template override for that file components/com_contact/views/contact/tmpl/default_address.php by copying it to templates/{template}/html/com_contact/contact/default_address.php. On the top of the file after the first doc block, we put the following code to display the custom fields:

$user = JFactory::getUser($this->item->user_id);
$user->text = '';
$dispatcher = JDispatcher::getInstance();
$dispatcher->trigger('onContentPrepare', array ('com_users.user', &$user, &$this->item->params, 0));
$output = $dispatcher->trigger('onContentBeforeDisplay', array('com_users.user', &$user, &$this->item->params, 0));
foreach ($output as $content)
{
	echo $content;
}

 

user list front detail

Avatar field

The avatar field is somehow special as we had to do some quirks to get it properly working. We created a Media field and set the Home parameter to yes. With that parameter the media manager is loading to a folder with the user name of the current logged in user. When a member is editing his avatar on the front, then he/she sees only his/her folder and not the rest.

With the following CSS code snippet, the folder selection is hidden for the member:

#imageForm .span12.control-group
{
    display:none
}

 It is not the securest way, but it is enough for our members as we need to prevent them from changing the folders because of inexperience and not abuse.

As most of the members upload images with different sizes as their avatars with used again some CSS magic to make them look equal and nice. The object-fit CSS command helps in that case. If you give the avatar field the avatar image class then you can use the following CSS piece of code that the avatars will look like in our screenshots on this page:

.contact-category .avatar {
	height:100px;
	width:100px;
	vertical-align: top;
	object-fit: cover;
	border-radius:50%
}

 To get the avatar as image in our template, you can use the following code:

if (!isset($user->dpfields))
{
	$user->text = '';
	JDispatcher::getInstance()->trigger('onContentPrepare', array('com_users.user', &$user, &$user->params, 0));
}

if (isset($user->dpfields))
{
	foreach ($user->dpfields as $field)
	{
		if ($field->alias != 'avatar')
		{
			continue;
		}
		echo '<a href="' . JRoute::_('index.php?option=com_users&view=profile') . '">';
		echo '<img src="' . $field->rawvalue . '" width="32" alt="' . htmlentities($user->name) . '"/></a>';
	}
}

 

user list avatar field

Conclusion

I'm sure there are different ways to accomplish a member list site, but this was our way to get it done. Together with DPCalendar, you can spice up your events site with a complete event system where people can book workshos or other events from the different members. If you want to have a look on the live site of this article, head over to cwtach.ch/de/mitglieder/vorstand.

We wish you a nice day with your member site.

5 5 dpcalendar

As more and more templates are based on Bootstrap 3, our aim was to support it fully as well. DPCalendar was working properly with BS3 before, but with version 5.5 we went one step further and do actively use it. We do keep BC, means it will work on your template as before. Beside that we added some more outstanding features like multiple prices per event or early bird discounts. The release notes and downloads of DPCalendar 5.5 can be found here.

Bootstrap 3 compatibility

Despite the fact that Joomla is based on Bootstrap 2, more and more templates are shipped with Bootstrap 3. This makes sense as BS2 is end of life and BS3 is nowadays the state of the art. DPCalendar was working properly with BS 3 since the beginning but 100% compatibility was never guaranteed. In DPCalendar 5.5 we added the missing classes for the bs3 grids and changed the default settings of the modal popup to Joomla, to not conflict with the BS3 modals anymore. We tested to implementation with some of the most common BS3 templates like Purity III from JoomlArt. Let us know if it works with your BS3 template as well.

5 5 bootstrap

Multiple prices

A long outstanding feature of DPCalendar, the Joomla event manager, to have multiple prices per event, got finally implemented. You can define per event as many prices you want. Per price you can define the label and a description. These information will be shown on the event details page.

If the visitor wants to book tickets for the event, then an amount of tickets per price type can be selected. If there are tickets already booked for an event, then the pricing values can't be changed anymore.

5 5 prices edit

5 5 prices front

5 5 prices booking

Early bird discounts

To offer some discount for visitors who book early, the site admin can define unlimited early bird discounts. For every discount a value, type and date must be set. The value defines the amount of discount. The type if the value should reduce the price as fixed value or percentage of the original price. The date specifies till when the discount is valid. The date can be relative to the event date or absolute.

5 5 early bird edit

5 5 early bird front

Changelog

Beside that we fixed a couple of minor bugs and did some small enhancements for a new experience for the Joomla calendar and event manager. The following list represents the full changelog of the new 5.5 version:

  • [#67]   Show calendars of menu item first, when creating an event
  • [#1011]   Multiple prices to book tickets for
  • [#2493]   Add 'show only my events on/off' option in module
  • [#3830]   Full Bootstrap 3 compatibility
  • [#3845]   Early bird discount
  • [#2713]   Parameter startdate and enddate missing to filter events
  • [#3861]   Show ticket holders in event details
  • [#3883]   Booking information text field
  • [#3906]   Maps Javascript API parameter
  • [#3919]   End of support for GCalendar
  • [#3841]   Wrong alias when location has already title
  • [#3864]   Remove uneeded space when using date ordinal sufix
  • [#3867]   Dropdown number of tickets shows not all max tickets
  • [#3887]   Map Module does not display map together with upcoming
  • [#3924]   Error is thrown when external calendars are deleted in upcoming module

Kind regards

Allon Moritz aka laoneo
Founder of Digital Peak

jab16

This is a short blog post about my visit at J and Beyond in Barcelona. I had a very good time meeting people from the Joomla community. It was a very positive atmosphere and you felt like being part of a big family. I had a session about the new core features Custom Fields on Joomla 3.7. The presentation was a big success as we got a lot of very positive feedback.

 The slides can be found here.

dpcalendar 5 4

We just released DPCalendar version 5.4 with some amazing new features. Or mission is to make one of the smartest Joomla event system out of DPCalendar. Beside the well know integration plugins to integrate your Google calendar, iCloud or Exchange events we are investing a large amount of time to make the booking and ticket system more convenient for you. Read on what we did on that part of DPCalendar and for more amazing new features.

Booking and tickets improvements

The biggest change in the booking part is to set an end date where no more bookings are allowed. This date can be set in the event settings and can be an absolute or relative date to the start date of the event. Further changes are that the event limit is now globally per user or mail address. This means a person can not book on the second booking more tickets when the limit is already reached on the first booking.

When the event changes, the ticket holders will get notified about the changes. It is also possible now to download the invoices and tickets in the back end. They can also be resent.

booking actions

Overlapping checks

A check can be activated in the DPCalendar options when editing an event if it should be checked if there is already an event in that time frame. A warning will then be displayed above the input controls.

overlapping

CSV plugin enhancements

The CSV plugin got a bunch of new settings. Per CSV file the admin can define now which column represents the field of the event. Additionally the delimiter and the enclosure can be set.

csv plugin settings

Changelog

Beside that we fixed tons of minor bugs and did some small enhancements for a new experience for the Joomla calendar and event manager. The following list represents the full changelog of the new 5.4 version:

  • [#2914]   Overlapping check for events on same calendar
  • [#3540]   E-Mail notification on event change
  • [#3589]   Booking date stop
  • [#1256]   CSV plugin enhancement
  • [#3171]   Smart search end date not in the database
  • [#3267]   E-Mail event like in articles
  • [#3320]   Location display in all layouts on the upcoming module
  • [#3339]   Only allow single ticket
  • [#3486]   Automatic Meta Descriptions?
  • [#3490]   Delete series on front end
  • [#3533]   Adapt loader image like in calendar
  • [#3552]   Don't send ticket when body is empty
  • [#3557]   Language Strings en-GB en-US
  • [#3566]   Re send invoice to attendee
  • [#3568]   Re send ticket from back end
  • [#3614]   Upcoming Filter not working for exact phrases
  • [#3633]   Disable scroll wheel zooming
  • [#3638]   Download ticket from back end
  • [#3644]   Show events count in calendar list
  • [#3551]   Access level new events is not forced
  • [#3574]   Invite email always english
  • [#3575]   Ical sync error
  • [#3593]   Only first invited shown in frontend
  • [#3600]   404 error on booking from calendar tooltip
  • [#3607]   Events Not Showing
  • [#3627]   Links to DPCalendar events generated by tags module broken
  • [#3630]   Schema on events produces errors on location
  • [#3646]   Booking cancel button redirects to roo
  • [#3647]   DPCalender Tickets option deactivate

Kind regards

Allon Moritz aka laoneo
Founder of Digital Peak

custom fields

[UPDATE 31. October 2016]
Custom fields got merged into Core!! We are finalizing it. All open issues can be seen here and and pull requests here. You can expect it for version 3.7!!

For a long time the Joomla community has a demand for a simple but powerful custom fields feature in the core Joomla CMS. In the Joomla 2.5.x and 3.x series, the internal form library has evolved and it is now possible to build a custom fields extension around JForm and the internal plugin system of Joomla, which just works. That's why we created DPFields for our own extensions and the Joomla core extensions like the articles manager or the user manager. We soon realized that DPFields can perhaps fulfill the needs of a basic custom fields feature in Joomla. So we asked our fellow developers on the mailing list and got some positive feedback. After Allon joined the Joomla 4 architecture team, some discussions were held with the PLT members Chris Davenport and Marco Dings, if custom fields should come into Joomla 3.6 or waiting for Joomla 4. We all agreed that it would make sense to have it in the 3 series as well.

Introduction

We will take the source code of DPFields 1.2.x and port it to the Joomla CMS. The name of of the custom fields extension will be com_fields and will integrate as a horizontal component. A horizontal component is new construct which will make the life of extension developers much easier in Joomla 4. But that's another story.

The component itself manages the fields for the different contexts. The fields system plugin will then hook into various events to add the custom fields to the edit forms or display them on the front. Every component in the Joomla core which can make use of custom fields will have some new menu items to manage the fields. It is a similar approach as with categories. For the beginning we will add custom fields to the articles and users.

Let's get it!

To test out the custom fields feature for Joomla, install the patch from PR #11833 or download Joomla from the custom fields branch from our fork https://github.com/Digital-Peak/joomla-cms/tree/custom-fields.

download

Let's test it!

This short tutorial will show you how to create your first custom field for an article and display it on the front with a custom field.

Create a custom field

  1. Log in on the back end.
  2. Navigate to Content -> Articles.
  3. Click on the left sidebar on Fields.
  4. Click on the New button on the top.
  5. Define a title and label.
  6. Click the Save & Close button on the top.
custom fields sidebar edit field

Create an article

  1. Log in on the back end.
  2. Navigate to Content -> Articles.
  3. Click on the New button on the top.
  4. Define a title.
  5. Open the Fields tab.
  6. Add some text on the custom field.
  7. Click the Save & Close button on the top.
edit article 

View it on the front

  1. Log in on the back end.
  2. Create an article menu item in the menu manager and select the new article.
  3. Go to the front site of your Joomla installation.
  4. Open the article.
  5. Check if the custom field is displayed.
front article 

What will come next?

After some internal testing and hopefully feedback from early-bird testers, we will create the pull request. That starts a next round of input from a wider range of Joomlers. If all goes well we hope it will be in Joomla on the J and Beyond conference. We will keep you updated on that blog how it goes.

Future of DPFields

The future of DPFields is unknown at that point, but you will always be safe as we provide a migration path. For the closer future you don't have to worry as we will keep DPFields alive and do active development of new features for it (if accepted, we will port it to core then). If com_fields will get the attention we hope within the Joomla community, then we will provide a migration path for all DPFields users and shut down the project. If not, we will keep the DPFields extension suite definitely alive. For you as user, nothing will change right now, and we will make sure you will have a neat experience, with com_fields or com_dpfields.

 

[UPDATE 31. April 2016]

The development of the custom fields feature moved to it's won repository at https://github.com/joomla-projects/custom-fields.

[UPDATE 5. May 2016]

As the Joomla PLT team decided to change the version number for the version 3.5.2 to 3.6.0, com_fields will be part of Joomla 3.7.

[UPDATE 29. August 2016]

Custom fields PR #11833 has landed with over 100 issues closed, 50 pr's done and 200 commit. Please do further testing there and not on the custom fields project!

[UPDATE 31. October 2016]

Custom fields PR #11833 got merged. We are finalizing it now.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.