En un tutorial anterior mostré como crear un formulario personalizado para la creación de ítems de listas en SharePoint, usando SharePoint Designer 2010.
Ahora voy mostrarles como tener campos de sólo lectura y campos editables en un nuevo formulario de Edición. Vamos a pasar de este formulario:
Al formulario que vamos a crear en este tutorial:
En mi sitio de SharePoint tengo una lista personalizada para la solicitud de requerimientos. En la siguiente imagen pueden ver encerrados en el cuadro verde los campos que deseo tener de solo lectura (Read-Only) y encerrados con azul los campos que voy a permitir modificar.
Paso a paso:
1. Nos conectamos al sitio con SharePoint Designer 2010 y hacemos clic en la parte de Lists and Libraries, buscamos la lista que deseamos modificar y hacemos clic en ella.
2. En la sección de Forms hagan clic en el botón New.
Nota: Es preferible trabajar siempre creado nuevas vistas y no modificar las vistas predeterminadas, por si alguna de nuestras modificaciones daña el formulario
3. Escriba el nombre del archivo, seleccione el tipo Edit item form y seleccione la casilla que lo predetermina (Set as default form for the selected type). Presione el botón OK.
4. Hacemos clic en el nombre del formulario para abrirlo.
5. Vamos a utilizar la vista de código (encerrada por el cuadro rojo) para modificar esta vista, porque utiliza XSLT, aunque para este ejemplo solo ocupamos conocimientos de HTML.
6. A continuación buscan la plantilla dvt_1.rowedit para modificarla.
7. Insertamos un reglón antes del campo que muestra el Detalle corto del requerimiento para poner un título.
8. Insertamos otro título antes del campo Solicitante.
9. Insertamos el título final antes del campo numero de contratacion asignado.
10. A todos los campos que deseamos mostrar como de solo lectura se les debe cambiar el atributo ControlMode. A continuación les muestro el código original:
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="Edit" FieldName="Title" __designer:bind="{ddwrt:DataBind('u',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="Edit"/>
</td>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, «Courier New», courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Y como debe quedar el código:
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="Display" FieldName="Title" __designer:bind="{ddwrt:DataBind('u',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="Display"/>
</td>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, «Courier New», courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
11. Guardamos los cambios y probamos nuestro formulario.