How to run TreeGrid SalesForce Lightning Web Component (LWC) examples
This paragraph uses Visual Studio Code based on Hello world example desribed at https://www.salesforcetroop.com/lwc/hello-world-using-lwc.
For another editor use similar Hello world approach.
To learn how to set up Visual Studio Code for SalesForce LWC see https://www.apexhours.com/how-to-setup-visual-studio-code-for-salesforce/.
If you have any problems running SalesForce LWC examples please contact our technical support.
0) Open or create your SalesForce SFDX project in VS Code. If you don't have any, folow the above link.
Create LWC project in VS Code
1) In VS Code, open the Command Palette (by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS).
2) Type SFDX and select SFDX: Create Lightning Web Component.
3) Type treeGridLWC as the name of the new component and press Enter. If entered different name, you will need to rename the sample files after copied in point 5).
4) Press Enter again to accept the default force-app/main/default/lwc.
Copy sample files to the project
5) Copy all three files and all subdirectories from the TreeGrid source directory /ExamplesSalesForce/Standalone/SampleLWC/ or /ExamplesSalesForce/Standard/SampleLWC/ to the /force-app/main/default/lwc/ directory and replace the three existing files here.
Upload static resources to SalesForce Org
6) In VS Code open the Command Palette, type SFDX and select SFDX: Open Default Org.
7) In the SalesForce Org go to Setup by clicking gear icon on the top right toolbar and choosing the Setup item.
8) Type static in the top "Search in setup" and choose Static Resources item from the offered list.
9) In the Static Resources list click to New button above the list and add TreeGrid static resources:
For Standalone examples add only file /ExamplesSalesForce/Standalone/StaticResources/GridEStandalone.js as TreeGridStandalone static resource.
Or for Standard examples add files:
/ExamplesSalesForce/Standard/StaticResources/GridE.js as TreeGrid static resource.
/ExamplesSalesForce/Standard/StaticResources/StandardDialog.css as TreeGridDialogCSS static resource.
/ExamplesSalesForce/Standard/StaticResources/StandardGrid.css as TreeGridGridCSS static resource.
/ExamplesSalesForce/Standard/StaticResources/WhiteGantt.css as TreeGridGanttCSS static resource.
/ExamplesSalesForce/Standard/StaticResources/jszip.min.js as JSZip static resource.
10) In the Static Resources list click to New button above the list and add sample TreeGrid static resources:
/ExamplesSalesForce/Standalone/StaticResourcesSamples/Books.js as TreeGridBooks static resource.
/ExamplesSalesForce/Standalone/StaticResourcesSamples/Excel.xlsx as TreeGridExcel static resource.
Deploy the VS Code project to the SalesForce Org
11) In the VS Code treeGridLWC project tree right click to default directory (force-app\main\default) and
choose option SFDX: Deploy This Source to Org in the popup menu.
12) Check if the deploying was sucessful and correct the errors if failed.
Create new SalesForce Lightning page with the new component
13) In the SalesForce Org Setup page type builder in the top "Search in setup" and choose Lightning App Builder item from the offered list.
14) In Lightning App Builder pages list click to New button, choose App Page and click Next.
15) Type the page label, e.g. TreeGrid Samples and press Enter.
16) Choose the page layout, e.g. One Region and click Done.
17) Drag the created component treeGridLWC from the left menu (from Custom section) to the right page.
18) Click to Save button in the top right corner. In next dialog click to Activate.
19) In the next Activation dialog click to Lightning Experience tab on top and choose the application where to add the page.
For example choose Sales on the left and click Add page to app on the right and next choose the page position in the listed tabs.
20) Show the page with the component (e.g. application Sales, tab TreeGrid Samples) in SalesForce Org application launcher and see the TreeGrid examples.
Using TreeGrid in SalesForce Lightning Web Component (LWC) project
TreeGrid Standalone
Standalone version (GridEStandalone.js) is single file TreeGrid bundle and contains all TreeGrid required files.
Registered standalone script can be generated only if purchased TreeGrid source codes!
1) Upload TreeGrid script to Static Resources
Upload GridEStandalone.js to SalesForce Static Resources. The resource name can be chosen freely, TreeGrid examples use "TreeGridStandalone" name.
2) Import TreeGrid script in the LWC project
Import the TreeGrid standalone script from static resources, e.g.: import TG from '@salesforce/resourceUrl/TreeGridStandalone';
Load TreeGrid script to the project, e.g.: await loadScript(this, TG); usually in the connectedCallback() definition (it must be set with async).
The loadScript function can be imported as import { loadScript } from 'lightning/platformResourceLoader';.
3) Place TreeGrid main tag and controls tag to html
Place TreeGrid controls tag to html. This tag will be used as parent for all TreeGrid dialogs and support tags. It should be positioned absolute and have lwc:dom="manual".
Add class attribute to refer the tag by it in code. And assign the tag in code to Grids.ControlsTag. For example:
<div class="TGControls" style="position:absolute;left:0px;top:0px;" lwc:dom="manual"></div>
Grids.ControlsTag = this.template.querySelector(".TGControls");
Assign querySelector function to TreeGrid as: Grids.QuerySelector = this.template.querySelector.bind(this.template);
Place TreeGrid main div tag to html. To this tag TreeGrid will be rendered to by TreeGrid() function. It should have lwc:dom="manual".
Add class attribute to refer the tag by it in code. For example:
<div class="TGFirst" style="height:600px;overflow:hidden;" lwc:dom="manual"></div>
4) Import or load TreeGrid layout and data
Import static json files, used usually for layout, e.g. in the samples: import FirstDef from './Samples/FirstDef.js'; import FirstLang from './Samples/FirstLang.js';.
Import other data like TreeGrid API event handlers, e.g. in the samples: import InitFirst from './Samples/FirstAPI.js'; and run the assignment script in the connectedCallback(), e.g.
InitFirst();.
Load TreeGrid data from database or import them if also static, e.g. in the samples: import FirstData from './Samples/FirstData.js';
5) Create TreeGrid from the layout and data
Create TreeGrid from the loaded data and imported layout by TreeGrid() function. For example TreeGrid({ Layout:{ Data:FirstDef, Bonus:Bonus }, Data:{ Data:FirstData, Bonus:{ Languages:{ L: { Code: "-EN", Layout_Data: FirstLang, Layout_Url:"" }}} }, Tag: this.template.querySelector(".TGFirst") });
The TreeGrid should have set Cfg DialogsArea to 1 or to the tag controlling the space for dialogs.
Note, Cfg MaxHeight is not supported by LWC and should be always 0.
If used popup grid, e.g. Dates dialog in the Gantt example, it is good to set Cfg ScrollParent to the tag that scrolls the LWC application.
TreeGrid Standard
If
not used
standalone bundle, it is required to upload, import and refer all the TreeGrid required files.
1) Upload TreeGrid files to Static Resources
Upload TreeGrid script and other required files to SalesForce Static Resources:
Main TreeGrid script /Grid/GridE.js, TreeGrid examples use name "TreeGrid",
Dialog CSS, e.g. /Grid/Styles/StandardDialog.css, TreeGrid examples use name "TreeGridDialogCSS",
Grid CSS, e.g. /Grid/Styles/StandardGrid.css, TreeGrid examples use name "TreeGridGridCSS",
Gantt CSS, e.g. /Grid/Styles/WhiteGantt.css (required only for Gantt chart), TreeGrid examples use name "TreeGridGanttCSS",
JSZip script /Grid/External/jszip.min.js (required only for xlsx import and optional for compressing xlsx export), TreeGrid examples use name "JSZip",
2) Import TreeGrid files in the LWC project
Import the TreeGrid script and other required files from static resources, e.g.:
import TG from '@salesforce/resourceUrl/TreeGrid';
import TGDIALOGCSS from '@salesforce/resourceUrl/TreeGridDialogCSS';
import TGGRIDCSS from '@salesforce/resourceUrl/TreeGridGridCSS';
import TGGANTTCSS from '@salesforce/resourceUrl/TreeGridGanttCSS';
import JSZIP from '@salesforce/resourceUrl/JSZip';
Load TreeGrid and JSZip scripts to the project, e.g.: await loadScript(this, TG); await loadScript(this, JSZIP); usually in the connectedCallback() definition (it must be set with async).
The loadScript function can be imported as import { loadScript } from 'lightning/platformResourceLoader';.
Add to project and import Defaults.js and Text.js. These files are located in /ExamplesSalesForce/Standard/SampleLWC/Grid/.
If supported more languages, add to project and import the language files TextXX.js. These files are located in /ExamplesSalesForce/Standard/SampleLWC/Grid/Languages/.
For example:
import Defaults from './Grid/Defaults.js';
import Text from './Grid/Text.js';
import TextBR from './Grid/Languages/TextBR.js';
import TextCA from './Grid/Languages/TextCA.js';
import TextCN from './Grid/Languages/TextCN.js';
import TextCS from './Grid/Languages/TextCS.js';
import TextDE from './Grid/Languages/TextDE.js';
import TextES from './Grid/Languages/TextES.js';
import TextFA from './Grid/Languages/TextFA.js';
import TextFR from './Grid/Languages/TextFR.js';
import TextGB from './Grid/Languages/TextGB.js';
import TextHR from './Grid/Languages/TextHR.js';
import TextIT from './Grid/Languages/TextIT.js';
import TextJP from './Grid/Languages/TextJP.js';
import TextPT from './Grid/Languages/TextPT.js';
import TextRU from './Grid/Languages/TextRU.js';
import TextXX from './Grid/Languages/TextXX.js';
3) Place TreeGrid main tag and controls tag to html
Place TreeGrid controls tag to html. This tag will be used as parent for all TreeGrid dialogs and support tags. It should be positioned absolute and have lwc:dom="manual".
Add class attribute to refer the tag by it in code. And assign the tag in code to Grids.ControlsTag. For example:
<div class="TGControls" style="position:absolute;left:0px;top:0px;" lwc:dom="manual"></div>
Grids.ControlsTag = this.template.querySelector(".TGControls");
Assign querySelector function to TreeGrid as: Grids.QuerySelector = this.template.querySelector.bind(this.template);
Place TreeGrid main div tag to html. To this tag TreeGrid will be rendered to by TreeGrid() function. It should have lwc:dom="manual".
Add class attribute to refer the tag by it in code. For example:
<div class="TGFirst" style="height:600px;overflow:hidden;" lwc:dom="manual"></div>
4) Import or load TreeGrid layout and data
Import static json files, used usually for layout, e.g. in the samples: import FirstDef from './Samples/FirstDef.js'; import FirstLang from './Samples/FirstLang.js';.
Import other data like TreeGrid API event handlers, e.g. in the samples: import InitFirst from './Samples/FirstAPI.js'; and run the assignment script in the connectedCallback(), e.g.
InitFirst();.
Load TreeGrid data from database or import them if also static, e.g. in the samples: import FirstData from './Samples/FirstData.js';
5) Create TreeGrid from the layout and data
Create TreeGrid from the loaded data and imported layout by TreeGrid() function. For example TreeGrid({ Layout:{ Data:FirstDef, Bonus:Bonus }, Data:{ Data:FirstData, Bonus:{ Languages:{ L: { Code: "-EN", Layout_Data: FirstLang, Layout_Url:"" }}} }, Tag: this.template.querySelector(".TGFirst") });
The TreeGrid should have set Cfg DialogsArea to 1 or to the tag controlling the space for dialogs.
Note, Cfg MaxHeight is not supported by LWC and should be always 0.
If used popup grid, e.g. Dates dialog in the Gantt example, it is good to set Cfg ScrollParent to the tag that scrolls the LWC application.
The imported CSS files must be passed to TreeGrid() in Cfg DialogCSS / GridCSS / GanttCSS attributes. There should be added "*" after the url value to use it as is.
For example: Cfg: { DialogCSS:TGDIALOGCSS+"*", CSS:TGGRIDCSS+"*", GanttCSS:TGGANTTCSS+"*" }
The imported Defaults.js and Text.js must be passed to TreeGrid() in Defaults Data and Text Data, for example:
TreeGrid( { Defaults: { Data: Defaults }, Text: { Data: Text }, ...
If imported language files, they must be added to Cfg Languages attribute to be passed to TreeGrid().
Cfg: { Languages: {
EN : { Name: "English", Text_Data: Text, Tip: "US English, base TreeGrid language" },
GB : { Name: "English", Text_Data: TextGB, Tip: "UK English, differs from US only in date and currency formats" },
DE : { Name: "Deutsch", Text_Data: TextDE, Tip: "German, fully translated" },
FR : { Name: "Fran\u00E7ais", Text_Data: TextFR, Tip: "French French, fully translated" },
CA : { Name: "Fran\u00E7ais", Text_Data: TextCA, Tip: "Canadian French, differs from French mainly in date formats; fully translated" },
IT : { Name: "Italiano", Text_Data: TextIT, Tip: "Italian, translated only TreeGrid, not the example" },
ES : { Name: "Espa\u00F1ol", Text_Data: TextES, Tip: "Spanish, translated only TreeGrid, not the example" },
PT : { Name: "Portugu\u00EAs", Text_Data: TextPT, Tip: "Portugal Portuguese, translated only TreeGrid, not the example" },
BR : { Name: "Portugu\u00EAs", Text_Data: TextBR, Tip: "Brazilian Portuguese, fully translated" },
CS : { Name: "\u010Cesky", Text_Data: TextCS, Tip: "Czech, fully translated" },
HR : { Name: "Hrvatski", Text_Data: TextHR, Tip: "Croatian, fully translated except Gantt example" },
RU : { Name: "\u041F\u043E-\u0440\u0443\u0441\u0441\u043A\u0438", Text_Data: TextRU, Tip: "Russian, fully translated" },
JP : { Name: "\u65E5\u672C\u8A9E", Text_Data: TextJP, Tip: "Japanese, fully translated" },
CN : { Name: "\u4E2D\u6587", Text_Data: TextCN, Tip: "Chinese, fully translated" },
FA : { Name: "\u0641\u0627\u0631\u0633\u06CC", Text_Data: TextFA, Tip: "Persian / Farsi, fully translated" },
XX : { Name: "XX Test", Text_Data: TextXX, Tip: "Test language to translate" }
} }