miércoles, 21 de abril de 2010

Añadiendo botones en las secciones del formulario

He encontrado en el blog de Adi Katz una funcionalidad muy buena para añadir botones en las secciones del formulario.
La verdad que es muy útil, ya que si bien podemos añadir botones en las vistas y en la parte superior de los formularios a través del ISV.config, no tenemos opcion de añadir botones en el mismo formulario.
Este ejemplo muestra como añadir los mismos, a través de Javascript.
Lo que hay que hacer simplemente es crear un atributo nuevo de tipo texto y añadirlo en el formulario quitándole la etiqueta en el mismo. En mi ejemplo el atributo se llama "new_texto".
Luego hay que añadir este código en el Onload:

function InlineToolbar(containerId)
{
var toolbar = this;
var container = document.all[containerId];

if (!container)
{
return alert("Toolbar Field: " + containerId + " is missing");
}

container.style.display = "none";
container = container.parentElement;

toolbar.AddButton = function(id,text,width,callback,imgSrc)
{
var btn = document.createElement("button");
var btStyle = new StyleBuilder();
btStyle.Add( "font-family" , "Arial" );
btStyle.Add( "font-size" , "12px" );
btStyle.Add( "line-height" , "16px" );
btStyle.Add( "text-align" , "center" );
btStyle.Add( "cursor" , "hand" );
btStyle.Add( "border" , "1px solid #3366CC" );
btStyle.Add( "background-color" , "#CEE7FF" );
btStyle.Add( "background-image" , "url( '/_imgs/btn_rest.gif' )" );
btStyle.Add( "background-repeat" , "repeat-x" );
btStyle.Add( "padding-left" , "5px" );
btStyle.Add( "padding-right" , "5px" );
btStyle.Add( "overflow" , "visible" );
btStyle.Add( "width" , width );

btn.style.cssText = btStyle.ToString();
btn.attachEvent("onclick",callback);
btn.id = id;

if (imgSrc)
{
var img = document.createElement("img");
img.src = imgSrc;
img.style.verticalAlign = "middle";
btn.appendChild(img);
btn.appendChild(document.createTextNode(" "));
var spn = document.createElement("span");
spn.innerText = text;
btn.appendChild(spn);
}
else
{
btn.innerText = text;
}

container.appendChild(btn);
container.appendChild(document.createTextNode(" "));

return btn;
}

toolbar.RemoveButton = function(id)
{
var btn = toolbar.GetButton(id)
if (btn)
{
btn.parentNode.removeChild(btn);
}
}

toolbar.GetButton = function(id)
{
return document.getElementById(id);
}

function StyleBuilder()
{
var cssText = new StringBuilder();
this.Add = function( key , value ){cssText.Append( key ).Append( ":" ).Append( value ).Append( ";" );}
this.ToString = function(){return cssText.ToString();}
}

function StringBuilder()
{
var parts = [];
this.Append = function( text ){parts[ parts.length ] = text;return this;}
this.Reset = function(){parts = [];}
this.ToString = function(){return parts.join( "" );}
}
}

/* Start Script Execution */
function OnCrmPageLoad()
{
window.GeneralToolbar = new InlineToolbar("new_texto");
GeneralToolbar.AddButton("btnActivity","Nueva Actividad","10%",Lookup_Click);
GeneralToolbar.AddButton("btnAddNote","Adjuntar fichero","16px",AddNote_Click,"/_imgs/ico_16_5_d.gif");
}


function Lookup_Click()
{
openStdDlg('/InfoavanCRM/Activities/dlg_create.aspx', window, 350, 350);
}

function AddNote_Click()
{
locAddFileTo(5);
}
OnCrmPageLoad() ;

Y el formulario quedaría finalmente así:

En este caso, le he modificado la funcionalidad para que puedan adjuntar ficheros y añadir directamente actividades.

El post original del que saqué la idea es: http://mscrm4ever.blogspot.com/2009/10/crm-40-creating-inline-toolbar-and.html

Un saludo,

1 comentario: