Maestro / Detalle

Una interfaz maestro-detalle muestra una lista maestra y los detalles para el elemento seleccionado actualmente. Un área maestra puede ser un formulario, una lista o un árbol de elementos, y un área de detalles puede ser un formulario, una lista o un árbol de elementos que normalmente se colocan debajo o al lado del área maestra.

Una relación maestro-detalle puede ser una relación de tipo uno a muchos. Ejemplos de una relación maestro-detalle son:

  • Un conjunto de órdenes de compra y un conjunto de artículos de línea que pertenecen a cada orden de compra.
  • Un informe de gastos con un conjunto de partidas de gastos.
  • Un departamento con una lista de empleados que le pertenecen.

Una aplicación puede usar esta relación maestro-detalle para permitir a los usuarios navegar a través de los datos de la orden de compra y ver los datos detallados de las partidas individuales relacionadas solo con la orden de compra maestra seleccionada.

PHP Master – Ejemplo de detalle

En este ejemplo se desarrolla una aplicación maestra / detalle completa. Para construir esta aplicación se crean dos formularios. El primero (Maestro) se basa en la tabla de pedidos y el segundo (Detalle) se basa en pedidos_detalle.

Creando el formulario maestro

1. Cree una nueva aplicación de formulario simple basada en la tabla pedidos

2. En el menú de la aplicación, haga clic en Posicionamiento de Campos.

3. Oculte los campos: ShipVia, ShipRegion, ShipName y ShipPostalCode

4. En el menú de la aplicación, haga clic en Bloques de la carpeta Diseño.

5. Cambie el nombre y la etiqueta del bloque a Información general

6. Haga clic en Crear nuevo bloque.

7. Ingrese los valores para los atributos Nombre, Etiqueta y Información de envío

8. Haga clic en Crear nuevo bloque de nuevo.

9. Ingrese los valores para los atributos Nombre, Etiqueta y Detalles de pedido.

10. Edite las propiedades de los bloques creados de acuerdo con la siguiente imagen:

11. En el menú de la aplicación, haga clic en Posicionamiento de los campos para organizar el campo de acuerdo con la siguiente tabla:

BlockField
General InfoOrderID
CustomerID
EmplyeeID
OrderDate
RequiredDate
PriceOrder
Ship InfoShippedDate
ShipAdress
Freight
ShipCity
ShipState
ShipCountry
Order Details

Creando el formulario de detalle

1. Cree una nueva aplicación de Formulario de tipo Vista Grid editable basada en la tabla order_details

2. Genere el código fuente del formulario de detalles haciendo clic en Generar fuente en la barra de herramientas de ScriptCase.

Creando el enlace entre los formularios Maestro y Detalle.

1. Regrese al formulario maestro haciendo clic en la pestaña de aplicaciones

2. En el menú de la aplicación, haga clic en Nuevo detalle en la carpeta Formulario maestro / detalle.

3. Ingrese los detalles para Nombre y Etiqueta. Haga clic en Crear.

4. Seleccione el formulario de detalle y Siguiente. (En este caso se llama Form38_1)

5. Siguiendo el asistente, asigne los campos OrderID de los dos formularios y guárdelo.(Se debe de asignar al Primary Key del Maestro con el Foreign Key del Detalle)

Listo, el formulario Maestro / Detalle ya está creado, pero ahora personalizaremos los campos y crearemos reglas de validación para la aplicación.

Personalizando los campos del formulario Detalle

1. Todavía en el formulario de detalle, abra el menú Posicionamiento de los campos

2. Oculte los campos OrderDetailsID y OrderID.

3. En el menú de la aplicación, haga clic en Campos >> ProductID.

4. Cambie el tipo de datos a seleccionar al tipo Select.

5. Acceda a la pestaña de búsqueda de edición para el campo ProductID.

6. Ingrese las siguientes instrucciones para el SQL Select Statement:

SELECT ProductID, ProductName 
FROM products 
ORDER BY ProductID

7. Cambie el atributo Permitir valor negativo a Sí.

8. Seleccione la opción Nuevo campo en el menú Campo.

9. Ingrese 1 para cantidad de campo y haga clic en Siguiente.

10. Seleccione Moneda para el Tipo de propiedad e ingrese Total para Nombre y Etiqueta. Haga clic en Crear.

Creación de métodos para detalles de formulario

El primer método se utiliza para calcular el valor total de la suma de todos los artículos para cada pedido.

1. En el menú de la aplicación, seleccione la carpeta Programación-> Métodos PHP.

2. Crea un nuevo método llamado calculo_total

3. Ingrese el siguiente código fuente para el método de cálculo de cálculo:

{total} = ({unitprice}*{quantity}) - {discount};

El segundo método se utilizará para verificar que el artículo que se va a insertar en la aplicación todavía existe en stock.

4. Crea un nuevo método llamado check_stock

5. Ingrese el siguiente código fuente para el método check_stock:

sc_lookup(dataset,"SELECT unitsinstock 
FROM products 
WHERE productid = {productid}");

if({dataset}[0][0] < {quantity}) {
sc_error_message("Insufficient Quantity");
sc_set_focus('quantity');
}
if({unitprice} != 0 && {quantity} != 0){
{total} = ({unitprice} * {quantity} ) - {discount};
}

El tercer método se utiliza para actualizar el formulario de solicitud, el valor total de la suma de todos los elementos de una solicitud en particular.

6. Crea un nuevo método llamado update_master

7. Ingrese el siguiente código fuente para el método update_master:

sc_lookup(dataset,"select SUM((quantity*unitprice)- discount) FROM order_details 
WHERE orderid = {orderid}");

if(!empty({dataset[0][0]}))
{
$total = {dataset[0][0]};
sc_exec_sql("UPDATE orders SET priceorder = $total WHERE orderid = {orderid}"); 
sc_format_num($total, '.', ',', 2, 'S', '1', '');
sc_master_value('priceorder',$total);
} else {

$total = 0;
sc_format_num($total, '.', ',', 2, 'S', '1', '');
sc_master_value('priceorder',$total);

}

Creando eventos Ajax para el formulario de detalle.

1. En el menú de la aplicación, seleccione la carpeta Eventos Ajax y haga clic en Nuevo evento Ajax.

2. Seleccione el campo Descuento y seleccione el evento onChange. Haga clic en el botón Crear evento para finalizar.

3. En el editor de eventos, llame al método calculo_total.

calculo_total();

4. Cree un nuevo evento Ajax para el campo ProductID.

5. Ingrese el siguiente código fuente para el evento onChange:

sc_lookup(dataset,"select unitprice from products 
WHERE productid = '{productid}'");

if(!empty({dataset}[0][0])){

{unitprice} = {dataset}[0][0];
sc_set_focus('quantity');
}
else{
{unitprice} = 0;
sc_set_focus('unitprice');
}

6. Cree un nuevo evento Ajax para el campo Cantidad.

7. Ingrese el siguiente código fuente para el evento onChange:

sc_lookup(dataset,"select unitprice from products 
WHERE productid = '{productid}'");

if(!empty({dataset}[0][0])){

{unitprice} = {dataset}[0][0];
sc_set_focus('quantity');
}
else{
{unitprice} = 0;
sc_set_focus('unitprice');
}

8. Cree un nuevo evento OnChange Ajax para el campo UnitPrice.

9. En el editor de eventos llame al método calculo_total.

Llamando a los métodos desde el formulario creado eventos.

1. En el menú de la aplicación, seleccione la carpeta Eventos (vea la imagen a continuación). Como se hizo para los eventos de campo, los métodos se llaman en los eventos de formulario. En la tabla a continuación hay una lista de métodos que deben llamarse en cada evento.

EventMethod
onBeforeInsertcheck_stock();
onAfterInsertupdate_master();
onBeforeUpdatecheck_stock();
onAfterUpdateupdate_master();
onAfterDeleteupdate_master();
onLoadRecordcheck_stock();

2. Genere el código fuente del formulario de detalles haciendo clic en Generar fuente en la barra de herramientas de ScriptCase.

3. Ejecute la aplicación maestra a través del botón en la barra de herramientas de ScriptCase.

Para ver más ejemplos creados con Scriptcase, haga clic aquí.

Compartir este tutorial

Tutoriales en la misma categoria

Form login responsivo 3

En este ejemplo, veremos cómo utilizar las Plantillas HTML disponibles para crear aplicaciones de ...

Tutorial: Form login responsivo 2

En este ejemplo, veremos cómo utilizar las Plantillas HTML disponibles para crear aplicaciones de...

Form login responsivo

En este ejemplo, veremos cómo utilizar las Plantillas HTML disponibles para crear aplicaciones de ...

Aplicación Grid de informe con etiquetas fijas

Informe en formato de resumen con etiquetas ancladas a la parte superior de la pantalla. Cre...

Comentar este post