# Cockpit Card Implementation Checklist ## Overview Adding a new card to the Customer 360 Cockpit (Call_Customer360TabUI) requires changes in **exactly 7 locations**. Missing any of these will cause the card to not appear, not load data, or display incorrectly. --- ## The 7 Required Locations ### 1. Process Declarations **File:** `src/Call/PR/Call_StoreCockpitTab/Call_StoreCockpitTabProcess.processflow.xml` **Section:** `` Add 4 declarations for each card: ```xml ``` **Pattern:** - `CardXxx_List` - The list object containing data - `CardXxx_InformationText` - Info text (e.g., "3 / 10") - `CardXxx_DataLoaded` - Boolean flag for loading state - `CardXxx_DisplayedSubcomponentName` - **MANDATORY** for proper display --- ### 2. EntryActions CREATE **File:** `src/Call/PR/Call_StoreCockpitTab/Call_StoreCockpitTabProcess.processflow.xml` **Section:** `` Create the list object instance: ```xml ``` --- ### 3. ShowCockpit Events **File:** `src/Call/PR/Call_StoreCockpitTab/Call_StoreCockpitTabProcess.processflow.xml` **Section:** `` - Find the VIEW action named "ShowCockpit" Add event handler for card actions: ```xml Call::Customer360TabUI ``` --- ### 4. Load Chain Actions **File:** `src/Call/PR/Call_StoreCockpitTab/Call_StoreCockpitTabProcess.processflow.xml` **Section:** `` Add load action chain (typically 4 actions): ```xml ``` --- ### 5. UI CardContainer **File:** `src/Call/PR/Call_StoreCockpitTab/Call_Customer360TabUI.userinterface.xml` **Section:** Find the `` containing other cards, add new CardContainer: ```xml ``` **Critical:** The `DisplayedSubcomponentName` binding is **MANDATORY**. Without it, CockpitList always shows NoDataMessage even when data exists. --- ### 6. Card Visibility Allowlist **File:** `src/Utilities/BO/BoStoreCockpitHelper/Mv2/BoStoreCockpitHelper.IsCardVisible.bl.js` Add card name to the allowlist: ```javascript var allowedCards = [ 'cardHeader', 'cardSellIns', 'cardActivities', // ... existing cards ... 'cardMyNewCard', // ADD THIS LINE 'cardLastVisitSummary', ]; ``` --- ### 7. Locale Labels **File:** `src/Locale/en.locale.xml` Add labels: ```xml ``` --- ## DisplayedSubcomponentName Deep Dive ### Why It's Mandatory The `DisplayedSubcomponentName` controls which subcomponent of CockpitList is shown: - When list has data -> shows the list - When list is empty -> shows NoDataMessage **Without this binding:** CockpitList cannot determine what to display and defaults to NoDataMessage, even when the list contains items. ### The Three Required Pieces 1. **Process Declaration:** ```xml ``` 2. **Process Action:** ```xml ``` 3. **UI Binding:** ```xml ``` --- ## Common Mistakes | Mistake | Symptom | Fix | | ------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------- | | Forgetting DisplayedSubcomponentName | Card shows "No data" even when data is loaded | Add all 3 pieces (declaration, action, binding) | | Wrong Event Name | Nothing happens when clicking card items/buttons | Event name in UI must match Event name in Process | | Missing from Visibility Allowlist | Card doesn't appear at all | Add card name to `BoStoreCockpitHelper.IsCardVisible.bl.js` | | Incorrect Naming Convention | Bindings fail, data doesn't load | Use consistent naming: `CardXxx_` prefix for all declarations | | Missing Locale Labels | Card shows label IDs instead of text | Add all labels to locale files | --- ## Testing Checklist After adding a new card: - [ ] Card appears in the cockpit - [ ] Card title displays correctly (not label ID) - [ ] Data loads when card is opened - [ ] Info text shows correct count (e.g., "3 / 10") - [ ] List items display when data exists - [ ] NoDataMessage shows when list is empty - [ ] Clicking list items navigates correctly - [ ] "Show All" button works (if applicable) - [ ] Card respects visibility rules from BoStoreCockpitHelper --- _This documentation is maintained by the Modeler CLI plugin and refreshed on workspace upgrade._