Interacción de tabla de datos y tarjeta de trama de información
Una plantilla de diseño incluye una tarjeta de tabla de datos y una tarjeta Iframe. Es posible que la tarjeta Iframe actualice sus parámetros de consulta en función de la fila que se seleccione.
Para habilitar la característica, se necesitan determinadas configuraciones para la tabla de datos y la tarjeta iframe.
Configuraciones para la tabla de datos
{
"name": "enablePersistRowData",
"values": ["true"],
"metaInformation": "tableOption"
},
{
"name": "persistRowDataScope",
"values": [""], // optional, the scope we'll save it under in state, default is `selectedRowData`
"metaInformation": "tableOption"
}
Esta opción persiste el id de la fila pulsada en subscribable.$shared.selectedRowData, o se puede especificar un valor distinto de selectedRowData , en la tienda. Para que esta opción funcione, necesita un id para cada fila, que se debe establecer en la transformación.
Para borrar el estado cuando se destruye la tarjeta:
{
"name": "widgetDestroyed",
"values": ["clearStates"],
"metaInformation": "eventSubscription"
},
{
"name": "clearStates",
"values": ["iframeQueryParam"], // this should be the name of the scope you want to clear.
"metaInformation": "eventPayload"
}
Se almacena en estado en la estructura siguiente:
{
subscribable: {
$shared: {
selectedRowData: { // could be something other than persistedRowData if specified
id: '',
rowData: {} // the values in the row
}
}
}
}
Configuraciones para la tarjeta de bastidor
{
"name": "iframe.baseUrl",
"values": ["UIHub"],
"metaInformation": "widgetOption"
},
{
"name": "iframe.path",
"values": [""], // eg value: `/template/DEFAULT_INVENTORY_DETAIL_LAYOUT_TEMPLATE`
"metaInformation": "widgetOption"
},
{
"name": "iframe.queryParams",
"values": [""], // eg value: `inventoryId={{ iframeQueryParam.id }}&hiddenLayoutSections=queue`
"metaInformation": "widgetOption"
},
{
"name": "iframe.token",
"values": ["{{ token.raw }}"],
"metaInformation": "widgetOption"
},
{
"name": "iframe.cuiToken",
"values": ["{{ cuiToken }}"],
"metaInformation": "widgetOption"
},
{
"name": "iframe.tenantId",
"values": ["{{ tenantId }}"],
"metaInformation": "widgetOption"
},
{
"name": "iframe.offeringId",
"values": ["{{ offeringId }}"],
"metaInformation": "widgetOption"
},
{
"name": "iframe.viewData",
"values": ["{{ viewData }}"],
"metaInformation": "widgetOption"
},
{
"name": "token",
"values": ["refreshOptions"],
"metaInformation": "stateSubscription"
},
{
"name": "cuiToken",
"values": ["refreshOptions"],
"metaInformation": "stateSubscription"
},
{
"name": "iframeQueryParam", // this is the value we store in state when we click on a row, has to match the scope set in data table WD
"values": ["refreshOptions"], // we refresh the iframe every time that value changes
"metaInformation": "stateSubscription"
}
- Comportamiento
- Al pulsar cualquier fila de la tabla de datos se actualiza el parámetro de consulta que se pasa al widget Iframe.
Tabla de datos con tarjeta Iframe
- Tabla de datos: inventario de existencias agotadas
- Al pulsar una fila se guarda la información del objeto Inventario bajo
iframeQueryParamen el estado. Se puede acceder al ID coniframeQueryParam.idy cualquier otro atributo que esté bajoiframeQueryParam.rowData.{ "offeringId": "SCO", "id": "DATA_IFRAME_POC_TABLE", "state": "ACTIVE", "identifier": "DATA_IFRAME_POC_TABLE", "type": "Dashboard", "tenantId": "<TENANT_ID>", "createdDate": "2022-08-18T16:13:17.318Z", "createdBy": "samsmith@ibm.com", "lastModifiedDate": "2022-08-23T14:41:52.881Z", "lastModifiedBy": "samsmith@ibm.com", "path": "/api", "vendor": "IBM", "defaultLanguage": "en", "version": 1, "description": { "name": "Out of stock inventory - updaed -1", "language": "en", "description": "View out of stock inventory" }, "devConfigurations": [ { "name": "header.path", "values": [ "/template/INVENTORY_OUT_OF_STOCK_VIEW_ALL_LAYOUT_TEMPLATE" ], "metaInformation": "widgetOption" }, { "name": "header.type", "values": [ "metric_header" ], "metaInformation": "widgetOption" }, { "name": "header.title", "values": [ "COMMON.OUT_OF_STOCK_INVENTORY" ], "metaInformation": "widgetOption" }, { "name": "header.tooltip", "values": [ "COMMON.OVERVIEW_INVENTORY_OUT_OF_STOCK.TOOLTIP" ], "metaInformation": "widgetOption" }, { "name": "header.value", "values": [ "{{ totalCount }}" ], "metaInformation": "widgetOption" }, { "name": "icons[0].type", "values": [ "kebab_menu" ], "metaInformation": "widgetOption" }, { "name": "icons[0].options[0]", "values": [ "move" ], "metaInformation": "widgetOption" }, { "name": "colSpan", "values": [ "2" ], "metaInformation": "widgetOption" }, { "name": "rowSpan", "values": [ "22" ], "metaInformation": "widgetOption" }, { "name": "data.service", "values": [ "infohub" ] }, { "name": "queries[0].processor", "values": [ "EDGES" ], "metaInformation": "infohub.processor" }, { "name": "queries[0].fields", "values": [ "query OutOfStockInventory( $tenantId: String, $cursorId: String, $locationFilter: BooleanExp = { CONSTANT_VALUE: true }, $inventoryPlannerCoderFilter: BooleanExp = { CONSTANT_VALUE: true }, $categoryFilter: BooleanExp = { CONSTANT_VALUE: true }, $productStatusFilter: BooleanExp = { CONSTANT_VALUE: true }, $sortBy: String = \"product.name\", $sortOrder: SortOrder = ASC ) { OutOfStockInventory: businessObjects( advancedFilter: { AND: [ { LESS_EQUALS: [ { SELECT: \"quantity\", type: FLOAT }, { VALUE: \"0.0\", type: FLOAT } ] }, { EQUALS: [ { SELECT: \"inventoryType\", type: STRING}, {VALUE: \"PRODUCT\", type: STRING } ] }, $locationFilter, $inventoryPlannerCoderFilter, $categoryFilter, $productStatusFilter ] }, cursorParams: { after: $cursorId, first: 8, sort: { order: $sortOrder, fieldPath: $sortBy } }, hint: { viewId: \"graph\" }, simpleFilter: { tenantId: $tenantId, type: Inventory } ) { totalCount pageInfo { hasNextPage endCursor } edges { cursor object { ... on Inventory { id inventoryType plannerCode quantityBelowLowerThreshold inventoryParentType location { id locationIdentifier locationName locationType } product { id name status partNumber category { id name } } } } } } }" ], "metaInformation": "infohub.fields" }, { "name": "queries[0].variables.tenantId", "values": [ "{{ tenantId }}" ], "metaInformation": "infohub.variable.dynamic" }, { "name": "queries[0].variables.cursorId", "values": [ "{{ cursorId }}" ], "metaInformation": "infohub.variable.dynamic" }, { "name": "queries[0].variables.locationFilter", "values": [ "{ \"EQUALS_ANY\": [ {\"SELECT\": \"location.id\", \"type\": \"STRING\" }, { \"VALUES\": {{ inventory.appliedFilters.Location.ids }}, \"type\": \"STRING\" } ] }" ], "metaInformation": "infohub.variable.dynamicExpr" }, { "name": "queries[0].variables.inventoryPlannerCodeFilter", "values": [ "{ \"EQUALS_ANY\": [ {\"SELECT\": \"plannerCode\", \"type\": \"STRING\" }, { \"VALUES\": {{ inventory.appliedFilters.PlannerCode.ids }}, \"type\": \"STRING\" } ] }" ], "metaInformation": "infohub.variable.dynamicExpr" }, { "name": "queries[0].variables.categoryFilter", "values": [ "{ \"EQUALS_ANY\": [ {\"SELECT\": \"product.category.id\", \"type\": \"STRING\" }, { \"VALUES\": {{ inventory.appliedFilters.Category.ids }}, \"type\": \"STRING\" } ] }" ], "metaInformation": "infohub.variable.dynamicExpr" }, { "name": "queries[0].variables.productStatusFilter", "values": [ "{ \"EQUALS_ANY\": [ {\"SELECT\": \"product.status\", \"type\": \"STRING\" }, { \"VALUES\": {{ inventory.appliedFilters.ProductStatus.ids }}, \"type\": \"STRING\" } ] }" ], "metaInformation": "infohub.variable.dynamicExpr" }, { "name": "queries[0].variables.sortBy", "values": [ "{{ OutOfStockInventory.sort.by }}" ], "metaInformation": "infohub.variable.dynamic" }, { "name": "queries[0].variables.sortOrder", "values": [ "{{ OutOfStockInventory.sort.order }}" ], "metaInformation": "infohub.variable.dynamic" }, { "name": "columnSorted", "values": [ "OutOfStockInventory" ], "metaInformation": "stateScope" }, { "name": "OutOfStockInventory.sort", "values": [ "refreshData", "refreshSavedState" ], "metaInformation": "stateSubscription" }, { "name": "inventory.appliedFilters", "values": [ "refreshData" ], "metaInformation": "stateSubscription" }, { "name": "draggable", "values": [ "true" ], "metaInformation": "widgetOption" }, { "name": "horizontalScroll.enable", "values": [ "false" ], "metaInformation": "tableOption" }, { "name": "selectFirstRow", "values": [ "true" ], "metaInformation": "tableOption" }, { "name": "enableRowSelect", "values": [ "true" ], "metaInformation": "tableOption" }, { "name": "rowClicked", "values": [ "drilldownRowData.row" ], "metaInformation": "stateScope" }, { "name": "showFooter", "values": [ "true" ], "metaInformation": "widgetOption" }, { "name": "widget.footer.customTemplate", "values": [ "linkTpl" ], "metaInformation": "widgetOption" }, { "name": "widget.footer.label", "values": [ "COMMON.VIEW_ALL" ], "metaInformation": "widgetOption" }, { "name": "widget.footer.href.type", "values": [ "LAYOUT_TEMPLATE" ], "metaInformation": "widgetOption" }, { "name": "widget.footer.href.id", "values": [ "INVENTORY_OUT_OF_STOCK_VIEW_ALL_LAYOUT_TEMPLATE" ], "metaInformation": "widgetOption" }, { "name": "pagination.enable", "values": [ "false" ], "metaInformation": "tableOption" }, { "name": "selectableRow.enable", "values": [ "true" ], "metaInformation": "tableOption" }, { "name": "enablePersistRowData", "values": [ "true" ], "metaInformation": "tableOption" }, { "name": "persistRowDataScope", "values": [ "iframeQueryParam" ], "metaInformation": "tableOption" }, { "name": "stickyTableHeader", "values": [ "false" ], "metaInformation": "tableOption" }, { "name": "stripes", "values": [ "false" ], "metaInformation": "tableOption" }, { "name": "configurable", "values": [ "false" ], "metaInformation": "tableOption" }, { "name": "columns[0].cell.label", "values": [ "{{ product.partNumber }}" ], "metaInformation": "tableColumn" }, { "name": "columns[0].header.label", "values": [ "INVENTORY.PRODUCT.ID" ], "metaInformation": "tableColumn" }, { "name": "columns[0].sortable", "values": [ "false" ], "metaInformation": "tableColumn" }, { "name": "columns[0].cell.customTemplate", "values": [ "linkTpl" ], "metaInformation": "tableColumn" }, { "name": "columns[0].cell.href.type", "values": [ "LAYOUT_TEMPLATE" ], "metaInformation": "tableColumn" }, { "name": "columns[0].cell.href.id", "values": [ "DEFAULT_INVENTORY_DETAIL_LAYOUT_TEMPLATE" ], "metaInformation": "tableColumn" }, { "name": "columns[0].cell.href.params", "values": [ "inventoryId={{ id }},hiddenLayoutSections=queue" ], "metaInformation": "tableColumn" }, { "name": "columns[0].hidden", "values": [ "false" ], "metaInformation": "tableColumn" }, { "name": "columns[0].sequence", "values": [ "0" ], "metaInformation": "tableColumn" }, { "name": "columns[1].cell.label", "values": [ "{{ product.name }}" ], "metaInformation": "tableColumn" }, { "name": "columns[1].header.label", "values": [ "INVENTORY.PRODUCT.NAME" ], "metaInformation": "tableColumn" }, { "name": "columns[1].sortable", "values": [ "false" ], "metaInformation": "tableColumn" }, { "name": "columns[1].cell.customTemplate", "values": [ "textTpl" ], "metaInformation": "tableColumn" }, { "name": "columns[1].hidden", "values": [ "false" ], "metaInformation": "tableColumn" }, { "name": "columns[1].sequence", "values": [ "1" ], "metaInformation": "tableColumn" }, { "name": "columns[2].cell.label", "values": [ "{{ location.locationName }}" ], "metaInformation": "tableColumn" }, { "name": "columns[2].header.label", "values": [ "COMMON.LOCATION" ], "metaInformation": "tableColumn" }, { "name": "columns[2].sortable", "values": [ "true" ], "metaInformation": "tableColumn" }, { "name": "columns[2].cell.customTemplate", "values": [ "textTpl" ], "metaInformation": "tableColumn" }, { "name": "columns[2].hidden", "values": [ "false" ], "metaInformation": "tableColumn" }, { "name": "columns[2].sequence", "values": [ "2" ], "metaInformation": "tableColumn" }, { "name": "columns[3].cell.label", "values": [ "{{ quantityBelowLowerThreshold }}" ], "metaInformation": "tableColumn" }, { "name": "columns[3].header.label", "values": [ "INVENTORY.LOW_QUANTITY" ], "metaInformation": "tableColumn" }, { "name": "columns[3].sortable", "values": [ "false" ], "metaInformation": "tableColumn" }, { "name": "columns[3].cell.customTemplate", "values": [ "numberTpl" ], "metaInformation": "tableColumn" }, { "name": "columns[3].hidden", "values": [ "false" ], "metaInformation": "tableColumn" }, { "name": "columns[3].sequence", "values": [ "3" ], "metaInformation": "tableColumn" }, { "name": "widgetDestroyed", "values": [ "clearStates" ], "metaInformation": "eventSubscription" }, { "name": "clearStates", "values": [ "iframeQueryParam" ], "metaInformation": "eventPayload" }, { "name": "widgetInitialized", "values": [ "loadState", "refreshData" ], "metaInformation": "eventSubscription" }, { "name": "transformation", "values": [ "{ \"errors\": \"{{#? this.errors}}\", \"pageInfo\": \"{{this.data.OutOfStockInventory.pageInfo}}\", \"totalCount\": \"{{this.data.OutOfStockInventory.totalCount}}\", \"results\": { \"{{#each this.data.OutOfStockInventory.edges}}\": { \"cursor\": \"{{this.cursor}}\", \"id\": \"{{this.object.id}}\", \"quantityBelowLowerThreshold\": \"{{this.object.quantityBelowLowerThreshold}}\", \"location\": \"{{this.object.location}}\", \"product\": \"{{this.object.product}}\" } } }" ], "metaInformation": "widgetOption" }, { "name": "state.empty.title", "values": [ "COMMON.EMPTY_TITLE" ], "metaInformation": "widgetOption" }, { "name": "state.empty.body", "values": [ "COMMON.EMPTY_BODY" ], "metaInformation": "widgetOption" }, { "name": "state.empty.link.label", "values": [ "COMMON.EMPTY_LINK_LABEL" ], "metaInformation": "widgetOption" }, { "name": "state.empty.link.href.type", "values": [ "NEW_WINDOW" ], "metaInformation": "widgetOption" }, { "name": "state.empty.link.href.path", "values": [ "https://www.ibm.com/docs/en/sscis?topic=troubleshooting-no-data-display" ], "metaInformation": "widgetOption" } ], "userConfigurations": [ { "name": "chartType", "values": [ "data_table" ] } ], "adminConfigurations": [] }
- Widget de Iframe: Visualización de la página de detalles de inventario
- Sólo se utiliza el ID, pero se pasan tanto el ID de inventario como
inventory.product.partNumber.{ "id": "POC_IFRAME", "state": "ACTIVE", "path": "/api", "vendor": "IBM", "defaultLanguage": "en", "description": { "name": "Work Queue Items Additional Details", "language": "en", "description": "Work Queue Items Additional Details" }, "devConfigurations": [ { "name": "businessObject", "values": [ "refreshOptions" ], "metaInformation": "stateSubscription" }, { "name": "iframe.baseUrl", "values": [ "UIHub" ], "metaInformation": "widgetOption" }, { "name": "iframe.path", "values": [ "/template/DEFAULT_INVENTORY_DETAIL_LAYOUT_TEMPLATE" ], "metaInformation": "widgetOption" }, { "name": "iframe.queryParams", "values": [ "inventoryId={{ iframeQueryParam.id }}&inventoryOther={{ iframeQueryParam.rowData.product.partNumber }}&hiddenLayoutSections=queue" ], "metaInformation": "widgetOption" }, { "name": "iframe.token", "values": [ "{{ token.raw }}" ], "metaInformation": "widgetOption" }, { "name": "iframe.cuiToken", "values": [ "{{ cuiToken }}" ], "metaInformation": "widgetOption" }, { "name": "iframe.tenantId", "values": [ "{{ tenantId }}" ], "metaInformation": "widgetOption" }, { "name": "iframe.offeringId", "values": [ "{{ offeringId }}" ], "metaInformation": "widgetOption" }, { "name": "iframe.viewData", "values": [ "{{ viewData }}" ], "metaInformation": "widgetOption" }, { "name": "token", "values": [ "refreshOptions" ], "metaInformation": "stateSubscription" }, { "name": "cuiToken", "values": [ "refreshOptions" ], "metaInformation": "stateSubscription" }, { "name": "iframeQueryParam", "values": [ "refreshOptions" ], "metaInformation": "stateSubscription" }, { "name": "transformation", "values": [ "{\"errors\":\"{{#? this.errors}}\"}" ], "metaInformation": "widgetOption" } ], "userConfigurations": [ { "name": "chartType", "values": [ "iframe" ] } ], "adminConfigurations": [] }
Resultado
