Subpanel: Create new AJAX without hidding existing rows

[kenneth.thorman]

When you use the method outlined here http://www.sugarcrm.com/forums/showthread.php?t=28079 (see SUBPANEL AJAX SUPPORT: ) you can create new subpanel rows inline using AJAX without the whole page reloading. However when creating a new row it loads the create form and hides the existing rows. I would like to be able to see the existing rows when creating new ones.

Thank you in advance.

UPDATE:
OK the fix is rather simple actually. See the solution in post number 4 in this thread.

Regards
Kenneth Thorman

[kenneth.thorman]

In the following HTML extract


<li class="noBullet" id="whole_subpanel_MODULENAME">

<div style="cursor: move;" id="subpanel_title_MODULENAME">...</div>
<div cookie_name="MODULENAME_v" id="subpanel_MODULENAME" style="">

<div id="list_subpanel_MODULENAME">

<form onsubmit="return SUGAR.subpanelUtils.sendAndRetrieve(this.id, 'subpanel_MODULENAME', 'Loading ...', 'MODULENAME');" action="index.php" method="post" name="form" id="formformMODULENAME">

<input title="Create [Alt+N]" accesskey="N" class="button" name="button" value=" Create " type="submit">

</form>

</div>

</div>

</li>



The form on submit calls the following javascript code in SubPanelTiles.js

sendAndRetrieve: function(theForm, theDiv, loadingStr, subpanel) {

function success(data) {

theDivObj = document.getElementById(theDiv);
subpanelContents[theDiv] = new Array();
subpanelContents[theDiv]['list'] = theDivObj;

subpanelContents[theDiv]['newDiv'] = document.createElement('div');
subpanelContents[theDiv]['newDiv'].innerHTML = data.responseText; // fill the div

theDivObj.style.display = 'none';
theDivObj.parentNode.insertBefore(subpanelContents[theDiv]['newDiv'], theDivObj);

// if IE, evaluate the script on return
if(isIE) SUGAR.util.evalScript(data.responseText);
subpanelLocked[theDiv] = false;
ajaxStatus.hideStatus();

}

if(typeof subpanelLocked[theDiv] != 'undefined' && subpanelLocked[theDiv]) return false;
subpanelLocked[theDiv] = true;

if(typeof loadingStr == 'undefined') loadingStr = SUGAR.language.get('app_strings', 'LBL_LOADING');
ajaxStatus.showStatus(loadingStr);
YAHOO.util.Connect.setForm(theForm);
var cObj = YAHOO.util.Connect.asyncRequest('POST', 'index.php', {success: success, failure: success});

return false;

},



which in turn returns and changes the above html extract to the following (a little more detailed extract)

<li class="noBullet" id="whole_subpanel_MODULENAME">

<div style="cursor: move;" id="subpanel_title_MODULENAME" onmouseover="this.style.cursor = 'move';"></div>
<div>

<form action="index.php" method="post" name="form_EditView_MODULENAME" id="form_EditView_MODULENAME">

<input title="Save [Alt+S]" accesskey="S" class="button" onclick="this.form.action.value='Save';if(check_fo rm('form_EditView_MODULENAME'))return SUGAR.subpanelUtils.inlineSave(this.form.id, 'MODULENAME');return false;" name="button" value="Save" type="submit">
<input title="Cancel [Alt+X]" accesskey="X" class="button" onclick="return SUGAR.subpanelUtils.cancelCreate('subpanel_MODULEN AME');return false;" name="button" value="Cancel" type="submit">
<input title="Full Form [Alt+F]" accesskey="F" class="button" onclick="this.form.return_action.value='DetailView '; this.form.action.value='EditView';this.form.to_pdf .value='0';" name="button" value="Full Form" type="submit">
<div id="DEFAULT">

// Form fields goes in here

</div>
<div style="padding-top: 2px;">

<input title="Save [Alt+S]" accesskey="S" class="button" onclick="this.form.action.value='Save';if(check_fo rm('form_EditView_MODULENAME'))return SUGAR.subpanelUtils.inlineSave(this.form.id, 'MODULENAME');return false;" name="button" value="Save" type="submit">
<input title="Cancel [Alt+X]" accesskey="X" class="button" onclick="return SUGAR.subpanelUtils.cancelCreate('subpanel_MODULEN AME');return false;" name="button" value="Cancel" type="submit">
<input title="Full Form [Alt+F]" accesskey="F" class="button" onclick="this.form.return_action.value='DetailView '; this.form.action.value='EditView';this.form.to_pdf .value='0';" name="button" value="Full Form" type="submit">

</div>

</form>

</div>
<div cookie_name="MODULENAME_v" id="subpanel_MODULENAME" style="display: none;">

<div id="list_subpanel_MODULENAME">

<form onsubmit="return SUGAR.subpanelUtils.sendAndRetrieve(this.id, 'subpanel_MODULENAME', 'Loading ...', 'MODULENAME');" action="index.php" method="post" name="form" id="formformMODULENAME">

<input title="Create [Alt+N]" accesskey="N" class="button" name="button" value=" Create " type="submit">

</form>

</div>

</div>

</li>

[kenneth.thorman]

There must be a way to move the listdiv's Create button into its own div which in essence is hidden it when the CreateNEW div is visible but still allows the list div to be shown.

The PHP code responsible for the HTML generation seems to default to include/EditView/EditView.php and the EditView.tpl which in turn generates a module specific template in the cache folder.

Any Sugar/Javascript/DIV gurus out there care to comment?

Regards
Kenneth Thorman

[kenneth.thorman]

OK the fix is rather simple actually. In includ/generic/SugarWidgets/SugarWidgetSubPanelTopButton.php locate the


/** This default function is used to create the HTML for a simple button */
function display($defines, $additionalFormFields = null)
{

$temp='';
if(!empty($this->acl) && ACLController::moduleSupportsACL($defines['module']) && !ACLController::checkAccess($defines['module'], $this->acl, true)){

$button = "<input title='$this->title' class='button' type='button' name='button' value=' $this->form_value ' disabled/>\n</form>";
return $temp;

}

global $app_strings;

$button = $this->_get_form($defines, $additionalFormFields);
$button .= "<input title='$this->title' accesskey='$this->access_key' class='button' type='submit' name='button' value=' $this->form_value ' />\n</form>";
return $button;

}

and change it like this

/** This default function is used to create the HTML for a simple button */
function display($defines, $additionalFormFields = null)
{

$temp='';
if(!empty($this->acl) && ACLController::moduleSupportsACL($defines['module']) && !ACLController::checkAccess($defines['module'], $this->acl, true)){

$button = "<input title='$this->title' class='button' type='button' name='button' value=' $this->form_value ' disabled/>\n</form>";
return $temp;

}

global $app_strings;

$button = $this->_get_form($defines, $additionalFormFields);
$button .= "<div id='createbutton_subpanel_". strtolower($defines['module']) ."' style='display:visible'>";
$button .= "<input title='$this->title' accesskey='$this->access_key' class='button' type='submit' name='button' value=' $this->form_value ' />\n</div>\n</form>";
return $button;

}


and in the javascript template file located at
jssource\src_files\include\SubPanel\SubPanelTiles. js

and change this

sendAndRetrieve: function(theForm, theDiv, loadingStr, subpanel) {

function success(data) {

theDivObj = document.getElementById(theDiv);
subpanelContents[theDiv] = new Array();
subpanelContents[theDiv]['list'] = theDivObj;

subpanelContents[theDiv]['newDiv'] = document.createElement('div');
subpanelContents[theDiv]['newDiv'].innerHTML = data.responseText; // fill the div

theDivObj.style.display = 'none';
theDivObj.parentNode.insertBefore(subpanelContents[theDiv]['newDiv'], theDivObj);

// if IE, evaluate the script on return
if(isIE) SUGAR.util.evalScript(data.responseText);
subpanelLocked[theDiv] = false;
ajaxStatus.hideStatus();

}

...

},

to this

sendAndRetrieve: function(theForm, theDiv, loadingStr, subpanel) {

function success(data) {

theDivObj = document.getElementById(theDiv);
subpanelContents[theDiv] = new Array();
subpanelContents[theDiv]['list'] = theDivObj;

subpanelContents[theDiv]['newDiv'] = document.createElement('div');
subpanelContents[theDiv]['newDiv'].innerHTML = data.responseText; // fill the div

theDivObjCreateButton = document.getElementById('createbutton_'+theDiv);
theDivObjCreateButton.style.display = 'none';
//theDivObj.style.display = 'none';
theDivObj.parentNode.insertBefore(subpanelContents[theDiv]['newDiv'], theDivObj);

// if IE, evaluate the script on return
if(isIE) SUGAR.util.evalScript(data.responseText);
subpanelLocked[theDiv] = false;
ajaxStatus.hideStatus();

}

...

},


cancelCreate: function(theDiv) {

subpanelContents[theDiv]['newDiv'].parentNode.removeChild(subpanelContents[theDiv]['newDiv']);
subpanelContents[theDiv]['list'].style.display = '';

return false;

}


and change it to this


cancelCreate: function(theDiv) {

subpanelContents[theDiv]['newDiv'].parentNode.removeChild(subpanelContents[theDiv]['newDiv']);
subpanelContents[theDiv]['list'].style.display = '';
theDivObjCreateButton = document.getElementById('createbutton_'+theDiv);
theDivObjCreateButton.style.display = '';

return false;

}



Please note that this javascript file is not the file actually used there is a space stripped version of it located at \include\SubPanel\SubPanelTiles.js which is the real file in use. Not really sure how you regenerate the space stripped version. Anyone?

Regards
Ken

[kenneth.thorman]

This can now be downloaded as an installable SugarCrm module from sourceforge. Please note that this module contains 5 different hacks to the Sugar core. So please read the release notes first.

https://sourceforge.net/project/show...kage_id=261293


Release notes:

WARNING! This package will patch your sugar installation in a NOT UPGRADE SAFE WAY. This might work in PRO and ENT version but I have not tested it.

Please see more here http://www.sugarcrm.com/forums/showthread.php?t=28679,
http://www.sugarcrm.com/forums/showthread.php?t=34277,
http://www.sugarcrm.com/forums/showthread.php?t=34293 and
http://www.sugarcrm.com/forums/showthread.php?t=33596

Features:
When using a AJAX enabled subpanel to create a new related (many-many) row the inline ajax form does no longer hide the existing rows but show up above the exiting rows. It properly disables the intial Create button that loaded the inline create form.

When using Sugar Roles you can control if a role can edit a row, delete a row ... there is no security setting stating that the role is allowed to create new rows. This has been added.

When building custom modules in the module builder you are not offered the chance to within the module builder create AJAX enabled subpanels under you main entity. You can do this manually in the layoutdefs files. I have added support for this inside the module builder with some radio buttons.


Changes:
Revision: 204
Author: kenneth_thorman
Date: 09:13:54, 10. juni 2008
Message:
Support for Create New Row in Ajax Subpanel still shows the list, while creating a new row
----
Added : /Appinux_Base/trunk/include
Added : /Appinux_Base/trunk/include/SubPanel
Added : /Appinux_Base/trunk/include/SubPanel/SubPanelTiles.js
Added : /Appinux_Base/trunk/include/generic
Added : /Appinux_Base/trunk/include/generic/SugarWidgets
Added : /Appinux_Base/trunk/include/generic/SugarWidgets/SugarWidgetSubPanelTopButton.php
Modified : /Appinux_Base/trunk/manifest.php


Revision: 203
Author: kenneth_thorman
Date: 09:12:41, 10. juni 2008
Message:
Support for Create New security right
----
Modified : /Appinux_Base/trunk/data/SugarBean.php
Added : /Appinux_Base/trunk/modules/ACLActions
Added : /Appinux_Base/trunk/modules/ACLActions/actiondefs.php
Added : /Appinux_Base/trunk/modules/ACLActions/language
Added : /Appinux_Base/trunk/modules/ACLActions/language/en_us.lang.php


Revision: 202
Author: kenneth_thorman
Date: 09:11:47, 10. juni 2008
Message:
Added support for the ModuleBuilder Enhancement for AJAX enabling the subpanels in custom modules
----
Added : /Appinux_Base/trunk/modules
Added : /Appinux_Base/trunk/modules/ModuleBuilder
Added : /Appinux_Base/trunk/modules/ModuleBuilder/MB
Added : /Appinux_Base/trunk/modules/ModuleBuilder/MB/MBRelationship.php
Added : /Appinux_Base/trunk/modules/ModuleBuilder/tpls
Added : /Appinux_Base/trunk/modules/ModuleBuilder/tpls/MBRelationship
Added : /Appinux_Base/trunk/modules/ModuleBuilder/tpls/MBRelationship/relationship.tpl