Master-Detail

Display a list of items and show details for the selected item using dcupl queries.

Key dcupl Functions

Function Purpose
query.items() Get list of items for the master view
query.setCondition() Filter to a single item by key
query.clear() Reset filters before new selection

Getting the List

Use items() to retrieve all items for the master list.

const list = dcupl.lists.create({ modelKey: 'Product' });

// Get all products for the list view
const products = list.catalog.query.items();

Selecting an Item

When user selects an item, filter by its key using setCondition().

function selectItem(itemKey: string) {
  list.catalog.query.setCondition({
    attribute: ',
    operator: 'eq',
    value: itemKey
  });

  const [selectedItem] = list.catalog.query.items({ count: 1 });
  return selectedItem;
}

Clearing Selection

Reset the query before selecting a different item.

function clearSelection() {
  list.catalog.query.clear();
}

function changeSelection(newItemKey: string) {
  list.catalog.query.clear();

  list.catalog.query.setCondition({
    attribute: ',
    operator: 'eq',
    value: newItemKey
  });

  return list.catalog.query.items({ count: 1 })[0];
}

Load associated data for the selected item using a separate list.

function getRelatedOrders(customerId: string) {
  const orderList = dcupl.lists.create({ modelKey: 'Order' });

  orderList.catalog.query.setCondition({
    attribute: 'customerId',
    operator: 'eq',
    value: customerId
  });

  return orderList.catalog.query.items();
}

Complete Flow

// 1. Create list and get all items
const list = dcupl.lists.create({ modelKey: 'Product' });
const allProducts = list.catalog.query.items();

// 2. User clicks on product "prod-123"
list.catalog.query.setCondition({
  attribute: ',
  operator: 'eq',
  value: 'prod-123'
});
const selectedProduct = list.catalog.query.items({ count: 1 })[0];

// 3. Load related data
const relatedList = dcupl.lists.create({ modelKey: 'Review' });
relatedList.catalog.query.setCondition({
  attribute: 'productId',
  operator: 'eq',
  value: 'prod-123'
});
const reviews = relatedList.catalog.query.items();

// 4. User selects different product - clear and reapply
list.catalog.query.clear();
list.catalog.query.setCondition({
  attribute: ',
  operator: 'eq',
  value: 'prod-456'
});
const newSelection = list.catalog.query.items({ count: 1 })[0];