function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ankit Chauhan 10Ankit Chauhan 10 

How to use SLDS (salesforce lightning design system) for implemented a GRID view for Account and its associated Cases?

Hi All,

I want to display a GRID view page based on SDLS (Salesforce Lightning Design System) which can fetch the list of Account and its associated attributes. The idea is to have a single view showing multiple GRID for each accounts based on some categorization like slow support cases, recently viewed and Stale Accounts. for example the Image below can give a rough idea.



First Screen
Once the user clicks any Account inside the GRID view, for example Account1 in Slow Support case section. Another View will open which will display the account information for that particular Account being clicked and will show the list of support cases in another GRID view section. Refer the Screenshot below.
Second Screen
                            
 
Mathew Andresen 5Mathew Andresen 5
You could do something like the following for the first view 
<!-- outer div-->
<div class="slds-grid">
    <!-- inner div's one for each container   #1-->
    <div class="slds-col">
    	<!-- div for account details -->
        <div>
        <fieldset class="slds-box slds-theme--default slds-container--small">
          </fieldset>        
        </div>
    </div>
                             	
    <!-- inner div's one for each container   #2-->
    <div class="slds-col">
    	<!-- div for account details -->
        <div>
        <fieldset class="slds-box slds-theme--default slds-container--small">
          </fieldset>        
        </div>
    </div>  
    
    <!-- inner div's one for each container   #3-->
    <div class="slds-col">
    	<!-- div for account details -->
        <div>
        <fieldset class="slds-box slds-theme--default slds-container--small">
          </fieldset>        
        </div>
    </div>      
</div> <!-- close outer Div-->
Then you after you get a selection you could input it into a new component for the result


https://www.lightningdesignsystem.com/components/utilities/grid/