GM - ListView Kanban

(gmpkg:KanbanDataGridComponent)

Documentation

GM - ListView Kanban component is used to display a list of records using a specific ListView across a navigation path. This component gives you a big picture view of all your work and lets you easily filter your records along your pipeline.

Use case: Display a Kanban of opportunities on a specific app page. This component can be used to build workspaces like Sales Development Reps Workspace.

Specification

GM - ListView Kanban component has the same properties as GM - ListView Grid except for the following attributes.

PropertyTypeDescription

Kanban Stages *

String

JSON string to define the stages. Each stage has:

  • label: the stage label

  • filter: the stage filter. This property defines the records that should be displayed under this stage. The configuration wizard can be used to define this property.

The example below can be used to display opportunities based on the stage value

Example of Kanban Stages configuration

[
   {
      "label": "Interact",
      "filter": {
         "StageName": {
            "operator": "in",
            "value": "('Prospecting','Qualification')"
         }
      }
   },
   {
      "label": "Propose",
      "filter": {
         "StageName": {
            "operator": "in",
            "value": "('Value Proposition', 'Id. Decision Makers')"
         }
      }
   }
]

API Reference

<design:component label="GM - ListView Kanban">
    <design:attribute name="relatedObjectName" label="Related Object Name" 
                      description="The name of the related object to display. Ex. Opportunity"/>    
    <design:attribute name="listViewName" label="ListView Name" 
                      description="The listView name of the related object to display"/> 
    <design:attribute name="dataGridCode" label="DataGrid Code" 
                      description="The code to identify the DataGrid"/>                            
    <design:attribute name="jsonStages" label="Kanban Stages" 
                      description="Json Kanban Stages. [{'label' : value, 'filter' : value}]"/>    
    <design:attribute name="rowLimit" label="Row Limit" 
                      description="The maximum number of row to fetch"/>
    <design:attribute name="pageSize" label="PageSize" 
                      description="The number of row to fetch per step"/>
    <design:attribute name="paginationEnabled" label="Enable Pagination" 
                      description="Check this option to enable pagination instead of scrolling. Note this option is not compatible with interactive filters"/>                      
    <design:attribute name="customLabel" label="Custom Label" 
                      description="Override the label of data grid"/> 
    <design:attribute name="customIcon" label="Custom Icon" 
                      description="Customize the data grid icon. All lightning icons are supported. You can get the icon name from https://lightningdesignsystem.com/icons/"/> 
    <design:attribute name="height" label="Grid Height" 
                      description="Set the grid height"/>    
    <design:attribute name="jsonFormulas" label="Formula Columns" 
                      description="Json string to define formula columbs. Use the configurations wizard to produce the property value"/>                           
    <design:attribute name="hiddenColumns" label="Hidden Columns" 
                      description="',' separated list of hidden columns"/>                           
    <design:attribute name="columnStyles" label="Column Style" 
                      description="Json string to define column's style. Don’t forget __c for custom fields. Ex. {'StageName':'width:200px'} to set the width for Stage column"/>         
    <design:attribute name="filter" label="Filter" 
                      description="Json string to define filter criteria. Don’t forget __c for custom fields. Ex. {'StageName':'Needs Analysis'} to see only 'Needs Analysis' Opportunities"/>    
    <design:attribute name="sort" label="Sort" 
                      description="The field list to sort the data grid. This field is used only for the initial load. Don’t forget __c for custom fields. Ex. Amount to sort opportunities by amount"/>
    <design:attribute name="order" label="Order" 
                      description="Asc or Desc order for sorting"/>
    <design:attribute name="aggregate" label="Aggregate" 
                      description="Json string to defined the aggregate fields. The components are supporting 'sum', 'minx' and 'max'. Don’t forget __c for custom fields. Ex. {'Amount':'sum'} to aggregate the amount of opportunities"/>    
    <design:attribute name="groupBy" label="Group By" 
                      description="',' separated list of fields to group by"/>                      
    <design:attribute name="collapseGroups" label="Collapse Groups" 
                      description="Collapse groups"/>         
    <design:attribute name="multiLevelGrouping" label="Multi Level Grouping" 
                      description="Multi Level Grouping"/>                                                                                           
    <design:attribute name="showAggregateHeader" label="Show Aggregate Header" 
                      description="Show the aggregate header as card on the top of the grid"/>    
    <design:attribute name="canUpdate" label="Enable Update Object" 
                      description="Check this option if you want to update object"/>    
    <design:attribute name="canMassUpdate" label="Enable Mass Update" 
                      description="Check this option if you want to mass update objects"/>                
    <design:attribute name="canDelete" label="Enable Delete Object" 
                      description="Check this option if you want to delete object"/>        
    <design:attribute name="canMassDelete" label="Enable Mass Delete" 
                      description="Check this option if you want to mass delete objects"/>                                                
    <design:attribute name="canCreate" label="Enable Create Object" 
                      description="Check this option if you want to create object"/>    
    <design:attribute name="canFilter" label="Enable Filter Object" 
                      description="Check this option if you want to use filters"/>    
    <design:attribute name="canClone" label="Enable Clone Object" 
                      description="Check this option if you want to clone objects"/> 
    <design:attribute name="canExport" label="Enable Export Object" 
                      description="Check this option if you want to export objects"/>    
    <design:attribute name="canImport" label="Enable Import Object" 
                      description="Check this option if you want to import CSV files"/>    
    <design:attribute name="canFreeze" label="Enable Freeze Columns" 
                      description="Check this option if you want to freeze columns"/>   
    <design:attribute name="canExplore" label="Enable Explorer" 
                      description="Check this option if you want to use the Grid Explorer"/>                                                                          
    <design:attribute name="canCollapse" label="Enable Grid Collapse" 
                      description="Check this option if you want to enable Grid collapse"/>                       
    <design:attribute name="canToggleFullscreen" label="Enable Toggle Fullscreen" 
                      description="Check this option if you want to enable toggle fullscreen"/>                                                                                                                                                                              
    <design:attribute name="canCreateFormula" label="Enable Create Formula" 
                      description="Check this option if you want to enable dynamic formula"/>                          
    <design:attribute name="noModalModification" label="Disable Modal Modification" 
                      description="Check this option if you want to disable modal modification"/>      
    <design:attribute name="fullRecordCreation" label="Full Record Creation" 
                      description="Check this option if you want to create a full record"/>      
    <design:attribute name="noModalCreation" label="Disable Modal Creation" 
                      description="Check this option if you want to disable modal object creation"/>  
    <design:attribute name="noInlineCreation" label="Disable Inline Creation" 
                      description="Check this option if you want to disable inline object creation"/>      
    <design:attribute name="noInlineModification" label="Disable Inline Modification" 
                      description="Check this option if you want to disable inline modification"/>                        
    <design:attribute name="inline" label="Disable Refresh View" 
                      description="Check this option if you want to disable the view refresh after an update"/>                  
    <design:attribute name="canInteract" label="Enable Dynamic Interactions" 
                      description="Check this option if you want to enable dynamic interactions"/>       
    <design:attribute name="canInMemFilter" label="Enable Interactive Filters" 
                      description="Check this option if you want to enable interactive filters"/>      
    <design:attribute name="canSplit" label="Enable Split View" 
                      description="Check this option if you want to enable split view"/>                             
    <design:attribute name="canLinkUserFilter" label="Enable Quick Filter Links" 
                      description="Check this option if you want to enable quick filter links"/>                      
    <design:attribute name="defaultValues" label="Default Values" 
                      description="Json string to initialize a new object created from the data grid. Don’t forget __c for custom fields. Ex. {'accountid':'$recordId', 'name':'Opp 1', 'stagename':'Needs Analysis'}"/>
    <design:attribute name="hiddenFields" label="Hidden Fields"                       
                      description="',' separated list of hidden fields for modal creation"/>   
    <design:attribute name="jsonActions" label="Actions" 
                      description="Json string to initialize the list of available actions from the data grid"/>
    <design:attribute name="buttonActions" label="Show Actions as Buttons" 
                      description="Use buttons for actions instead of icons"/>
    <design:attribute name="visibleActions" label="Custom Visible Actions" 
                      description="# of visible custom actions"/>            
    <design:attribute name="jsonRecordActions" label="Record Actions" 
                      description="Json string to initialize the list of available record actions"/>                                              
    <design:attribute name="frozenColumns" label="Frozen Columns" 
                      description="# of columns to freeze"/> 
    <design:attribute name="TotalColor" label="Total Color" 
                      description="Total row color"/>  
    <design:attribute name="TotalBgColor" label="Total Background" 
                      description="Total row background color"/> 
    <design:attribute name="recordDetail" label="Show Record Details" 
                      description="Show record details"/>    
    <design:attribute name="recordRelated" label="Record Related Components" 
                      description="Json string to initialize related components"/>    
    <design:attribute name="extraRecordRelated" label="Extra Record Related Components" 
                      description="Extra Record Related Components"/>                             
    <design:attribute name="editRecordLayout" label="Edit Record Layout" 
                      description="Json string to for a custom edit layout"/>                                    
    <design:attribute name="jsonSearchFields" label="Search Fields" 
                      description="',' separated search fields"/>   
    <design:attribute name="wildCardSearch" label="Wildcard Search" 
                      description="Use Wildcard Search"/>
    <design:attribute name="showBorder" label="Show Border" 
                      description="Show Border"/>    
    <design:attribute name="showColumnBorder" label="Show Column Border" 
                      description="Show Column Border"/>    
    <design:attribute name="fieldLabels" label="Custom Field Labels" 
                      description="{name:label} custom field labels map"/>
    <design:attribute name="readOnlyFields" label="ReadOnly Fields" 
                      description="',' separated list of readonly fields"/>     
    <design:attribute name="coloring" label="Cell Coloring" 
                      description="JSON conditions for cells coloring"/>
    <design:attribute name="extraColoring" label="Extra Cell Coloring" 
                      description="JSON conditions for cells coloring. Use this property to by pass App Builder limitation"/>                                            
    <design:attribute name="lookupOptions" label="Lookup Fields Options" 
                      description="JSON options for lookup fields {apiName : {titleField : value, subTitleField : value}}"/>    
    <design:attribute name="displayMode" label="Default Mode" 
                      description="Default execution mode : read | edit"/>                       
    <design:attribute name="density" label="Density" 
                      description="Grid density : comfy | compact"/>        
</design:component>

Last updated