SugarCRM Image Subpanel

bsoremsugar —  April 23, 2010 — 5 Comments

For part 3 of our series we are going to explore how to attach images to records.  This only works in SugarCRM 6.0.0 or later.  In 6.0 we get a new ‘Image’ field which is really cool, but it is a hassle to attach multiple images to any given record and you have to have a separate copy of each image if that image applies to multiple records.  What we are going to build here is a ‘tabless’ module that we will expose only as a subpanel on other modules.  This will allow us to display many images and relate them to other records.  It requires almost NO custom coding as 99% of it is now available through module builder.

What we are going to build looks something like this.

Images Subpanel

Images Subpanel

We begin by creating a new module in Module Builder.  We are going to call it “Images”.  So create a new project and name it “Images” and then create a module also called “Images” and make it look like this.

You notice that we unchecked Team Security and Navigation Tab.  Since this module is really there  just to supply us with a subpanel we don’t need tabs or teams.  Now we go into ‘Fields’ and add a custom Image field to the module.

Once we save this we go to edit the views and we are going to remove everything except Name, Image, Assigned User and Description.  The important view to remember here is the Quick Create view as it will be the first one shown when a user clicks on ‘Create’ on a subpanel.

We do pretty much the same thing on the other views, we leave Name, Image, Assigned User and Description.  This includes the ‘default’ subpanel view as this is the view that will paint the subpanel on Accounts, Contacts and Opportunities in this example.

Notice the column width percentages, I expanded the description field and contacted the others to make room.  You can add fields to you module as you need, like maybe if you are a Real Estate office you might need address fields or maybe if you sell cars you need names and models.  Whatever you want.  Anyway, once we edit all the views to include just the fields we need then we can move on to the relationships.  I am going to add a Many-to-Many with Accounts, Contacts and Opportunities in this example, you can add more if you’d like.

OK, so far we have been able to do everything we wanted to do in Module Builder.  We are very close to having everything we wanted.  The only thing we don’t have is the ability to add the description to the ListView and not have it show up as one long line.  We want the carriage returns obeyed in the ListView.  So we are going to do something else you could not do before Sugar 6.0.  We are going to define how a field it drawn on the ListView.  In my humble opinion this is a game changer.  Before Sugar 6.0 you could define how a field was drawn on the DetailView or the EdiView but NOT on the ListView.  What you got on the ListView was either the database value or an altered view that had to be coded in the bean itself.  Now you are free to represent your data on the ListView any way you want.  In this case we want to turn the “NewLine” characters in the description field into HTML <br> symbols.  We do this by creating a new file called

custom/include/SugarFields/Fields/Text/ListView.tpl


{*
/*********************************************************************************
* The contents of this file are subject to the SugarCRM Enterprise Subscription
* Agreement ("License") which can be viewed at
* http://www.sugarcrm.com/crm/products/sugar-enterprise-eula.html
* By installing or using this file, You have unconditionally agreed to the
* terms and conditions of the License, and You may not use this file except in
* compliance with the License.  Under the terms of the license, You shall not,
* among other things: 1) sublicense, resell, rent, lease, redistribute, assign
* or otherwise transfer Your rights to the Software, and 2) use the Software
* for timesharing or service bureau purposes such as hosting the Software for
* commercial gain and/or for the benefit of a third party.  Use of the Software
* may be subject to applicable fees and any use of the Software without first
* paying applicable fees is strictly prohibited.  You do not have the right to
* remove SugarCRM copyrights from the source code or user interface.
*
* All copies of the Covered Code must include on each user interface screen:
*  (i) the "Powered by SugarCRM" logo and
*  (ii) the SugarCRM copyright notice
* in the same form as they appear in the distribution.  See full license for
* requirements.
*
* Your Warranty, Limitations of liability and Indemnity are expressly stated
* in the License.  Please refer to the License for the specific language
* governing these rights and limitations under the License.  Portions created
* by SugarCRM are Copyright (C) 2004-2010 SugarCRM, Inc.; All Rights Reserved.
********************************************************************************/
*}
{capture name=getValue assign=value}{sugar_fetch object=$parentFieldArray key=$col}{/capture}
{$value|nl2br}

That “nl2br” at the end there does the magic and now, after you to a Admin->Repair->Quick Repair and Rebuild, your description field will be displayed properly on the ListView.

5 responses to SugarCRM Image Subpanel

  1. 

    Great post,You learn new stuff every day.

  2. 

    Does this work only on SugarPro or CE too? Thanks for answering

  3. 

    Field “image” should provide something more than just a text box. where do i put the image? in sugar directory? or in cache/upload?
    (the same question: does it work in CE? seems not…) please an answer would be appreciated. Thanks

Trackbacks and Pingbacks:

  1. lucrari de dizertatie - October 11, 2011

    lucrari de diploma…

    […]SugarCRM Developer Blog » Blog Archive » SugarCRM Image Subpanel[…]…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s