[Creating a B4J Project]

Start B4J.
Click File > New > SithasoIONIC7 BlankAD.
Type in the Project Name and click Ok.
This project has 2 layouts, the indexlayout and the blank layout.
The indexlayout has 'maincontent', 'mainpage', 'mainmenu' components.
If these are referred in the instructions below, update them in the 'indexlayout' layout or recreate them.

[Things to remember]

1. In the B4J IDE, click the 'Designer' menu option.
2. Click 'Open Internal Designer'.
3. Close the 'Form (WYSIWYG Designer)' if its open.
4. Right click on the layout and click 'Add View'.
5. Select 'Custom View'. This is the menu item that you will use to add the components defined below. Clicking an item will place the component in the layout.
6. When adding components to the layout designer, you might need to resize them to fit or shrink. Usually the first item should be enlarged to fit the area where more components will be added.
7. Now, let's start adding the components to the layout. To add each component, you will use 'Add View' > 'Custom View' and then select the component from the menu.
8. NB: It's not compulsory to specify the 'ParentID' property. It has been added for very specific few cases.

********** 1 **********

Right click 'Add View' > 'Custom View' > 'SHIonContent'.
Change the Name property of this component to 'maincontent'
Change the following properties for the 'SHIonContent.maincontent' component.
Name -> maincontent
Ion Page -> false

********** 2 **********

Right click 'Add View', then 'Custom View', then click 'SHIonPage'.
Drag & Drop this newly added component and place it inside the 'maincontent' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonPage.mainpage' component.
Name -> mainpage
ParentID -> maincontent
Router Name -> 
URL Path -> 
Has Tabs -> true

********** 3 **********

Click Project > Add New Module > Code Module. Type in 'pghome' as a module name and click Ok.
Copy and paste the code in the 'pgblank' code module to 'pghome' code module.
Replace 'blanklayout' on line 22 with 'homelayout'.
In the B4J IDE menu, click the 'Designer' > 'Open Internal Designer'.
Close the 'Form (WYSIWYG Designer)' if its open.
Click File > Save As, enter the layout name as 'homelayout' and click Ok
Right click on the layout and click 'Add View' > 'Custom View' > 'SHIonTab'.
Resize the component to fit the whole working area.
Change the Name property of this component to 'home'
Change the following properties for the 'SHIonTab.home' component.
Name -> home
Header / Page Title -> Sticky Notes
Tab -> home
Has Header -> true
Toolbar Color -> warning
Has Left Buttons -> false
Has Right Buttons -> false
Menu Button Auto Hide -> false


Open 'pgIndex' code module, find the 'AddPages' sub-routine.
Add the following code line 'pghome.Initialize(app)'.
********** 4 **********

Right click 'Add View', then 'Custom View', then click 'SHIonList'.
Drag & Drop this newly added component and place it inside the 'homecontent' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonList.list1' component.
Name -> list1
ParentID -> homecontent

********** 5 **********

Right click 'Add View', then 'Custom View', then click 'SHIonItem'.
Drag & Drop this newly added component and place it inside the 'list1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonItem.item1' component.
Name -> item1
ParentID -> list1
Lines -> none

********** 6 **********

Right click 'Add View', then 'Custom View', then click 'SHIonCard'.
Drag & Drop this newly added component and place it inside the 'item1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonCard.card1' component.
Name -> card1
ParentID -> item1
Color -> danger
Styles (JSON) -> border-top-right-radius:32px;
border-bottom-left-radius:32px;
margin-right:0px;
margin-left:0px;
width:100%

********** 7 **********

Right click 'Add View', then 'Custom View', then click 'SHIonCardHeader'.
Drag & Drop this newly added component and place it inside the 'card1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonCardHeader.cardheader1' component.
Name -> cardheader1
ParentID -> card1
Styles (JSON) -> padding-top:0px

********** 8 **********

Right click 'Add View', then 'Custom View', then click 'SHLabel'.
Drag & Drop this newly added component and place it inside the 'cardheader1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHLabel.label1' component.
Name -> label1
ParentID -> cardheader1
Size -> h4
Text -> Call Shandu @ 12
Elevation -> 

********** 9 **********

Right click 'Add View', then 'Custom View', then click 'SHIonCardContent'.
Drag & Drop this newly added component and place it inside the 'card1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonCardContent.cardcontent1' component.
Name -> cardcontent1
ParentID -> card1
Styles (JSON) -> padding-right:0px
padding-bottom:5px;

********** 10 **********

Right click 'Add View', then 'Custom View', then click 'SHIonItem'.
Drag & Drop this newly added component and place it inside the 'cardcontent1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonItem.item2' component.
Name -> item2
ParentID -> cardcontent1
Color -> danger
Lines -> none
Elevation -> 

********** 11 **********

Right click 'Add View', then 'Custom View', then click 'SHIonButton'.
Drag & Drop this newly added component and place it inside the 'item2' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonButton.editnote' component.
Name -> editnote
ParentID -> item2
Text -> 
Has Icon -> true
Icon Name -> pencil
Icon Slot -> icon-only
Fill -> clear
Slot -> end
Tooltip -> Edit note

********** 12 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFireEvent'.
Drag & Drop this newly added component and place it inside the 'editnote' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFireEvent.editnoteevent' component.
Name -> editnoteevent
ParentID -> editnote
TargetID -> editnote
Event Name -> Click
Add Attribute (JSON) -> modal1toolbar:color:
Set Text (JSON) -> modal1title:Edit Note
Set Value (JSON) -> textarea1:;
txtnoteid:;
Show Action Sheet -> 
Show Alert -> 
Show Loading -> 
Show Modal -> modal1
Show Page -> 
Show Pop Over -> 
Show Toast -> 
Hide Action Sheet -> 
Hide Alert -> 
Hide Modal -> 

********** 13 **********

Right click 'Add View', then 'Custom View', then click 'SHIonButton'.
Drag & Drop this newly added component and place it inside the 'item2' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonButton.deletenote' component.
Name -> deletenote
ParentID -> item2
Text -> 
Has Icon -> true
Icon Name -> trash
Icon Slot -> icon-only
Fill -> clear
Slot -> end
Tooltip -> Delete note

********** 14 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFireEvent'.
Drag & Drop this newly added component and place it inside the 'deletenote' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFireEvent.deletenoteevent' component.
Name -> deletenoteevent
ParentID -> deletenote
TargetID -> deletenote
Event Name -> Click
Show Alert -> alert1

********** 15 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFab'.
Drag & Drop this newly added component and place it inside the 'homecontent' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFab.fab1' component.
Name -> fab1
ParentID -> homecontent
Vertical -> top
Has List -> true

********** 16 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFabButton'.
Drag & Drop this newly added component and place it inside the 'fab1list' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFabButton.fabbutton1' component.
Name -> fabbutton1
ParentID -> fab1list
Color -> dark

********** 17 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFireEvent'.
Drag & Drop this newly added component and place it inside the 'fabbutton1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFireEvent.fabbutton1event' component.
Name -> fabbutton1event
ParentID -> fabbutton1
TargetID -> fabbutton1
Event Name -> Click
Add Attribute (JSON) -> modal1toolbar:color:dark
Set Text (JSON) -> modal1title:Add Note
Set Value (JSON) -> textarea1:;
txtnoteid:;
Show Action Sheet -> 
Show Alert -> 
Show Loading -> 
Show Modal -> modal1
Show Page -> 
Show Pop Over -> 
Show Toast -> 
Hide Action Sheet -> 
Hide Alert -> 
Hide Modal -> 

********** 18 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFabButton'.
Drag & Drop this newly added component and place it inside the 'fab1list' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFabButton.fabbutton2' component.
Name -> fabbutton2
ParentID -> fab1list
Color -> danger

********** 19 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFireEvent'.
Drag & Drop this newly added component and place it inside the 'fabbutton2' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFireEvent.fabbutton2event' component.
Name -> fabbutton2event
ParentID -> fabbutton2
TargetID -> fabbutton2
Event Name -> Click
Add Attribute (JSON) -> modal1toolbar:color:danger
Set Text (JSON) -> modal1title:Add Note
Set Value (JSON) -> textarea1:;
txtnoteid:;
Show Action Sheet -> 
Show Alert -> 
Show Loading -> 
Show Modal -> modal1
Show Page -> 
Show Pop Over -> 
Show Toast -> 
Hide Action Sheet -> 
Hide Alert -> 
Hide Modal -> 

********** 20 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFabButton'.
Drag & Drop this newly added component and place it inside the 'fab1list' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFabButton.fabbutton3' component.
Name -> fabbutton3
ParentID -> fab1list
Color -> primary

********** 21 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFireEvent'.
Drag & Drop this newly added component and place it inside the 'fabbutton3' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFireEvent.fabbutton3event' component.
Name -> fabbutton3event
ParentID -> fabbutton3
TargetID -> fabbutton3
Event Name -> Click
Add Attribute (JSON) -> modal1toolbar:color:primary
Set Text (JSON) -> modal1title:Add Note
Set Value (JSON) -> textarea1:;
txtnoteid:;
Show Action Sheet -> 
Show Alert -> 
Show Loading -> 
Show Modal -> modal1
Show Page -> 
Show Pop Over -> 
Show Toast -> 
Hide Action Sheet -> 
Hide Alert -> 
Hide Modal -> 

********** 22 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFabButton'.
Drag & Drop this newly added component and place it inside the 'fab1list' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFabButton.fabbutton4' component.
Name -> fabbutton4
ParentID -> fab1list
Color -> secondary

********** 23 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFireEvent'.
Drag & Drop this newly added component and place it inside the 'fabbutton4' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFireEvent.fabbutton4event' component.
Name -> fabbutton4event
ParentID -> fabbutton4
TargetID -> fabbutton4
Event Name -> Click
Add Attribute (JSON) -> modal1toolbar:color:secondary
Set Text (JSON) -> modal1title:Add Note
Set Value (JSON) -> textarea1:;
txtnoteid:;
Show Action Sheet -> 
Show Alert -> 
Show Loading -> 
Show Modal -> modal1
Show Page -> 
Show Pop Over -> 
Show Toast -> 
Hide Action Sheet -> 
Hide Alert -> 
Hide Modal -> 

********** 24 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFabButton'.
Drag & Drop this newly added component and place it inside the 'fab1list' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFabButton.fabbutton5' component.
Name -> fabbutton5
ParentID -> fab1list
Color -> warning

********** 25 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFireEvent'.
Drag & Drop this newly added component and place it inside the 'fabbutton5' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFireEvent.fabbutton5event' component.
Name -> fabbutton5event
ParentID -> fabbutton5
TargetID -> fabbutton5
Event Name -> Click
Add Attribute (JSON) -> modal1toolbar:color:warning
Set Text (JSON) -> modal1title:Add Note
Set Value (JSON) -> textarea1:;
txtnoteid:;
Show Action Sheet -> 
Show Alert -> 
Show Loading -> 
Show Modal -> modal1
Show Page -> 
Show Pop Over -> 
Show Toast -> 
Hide Action Sheet -> 
Hide Alert -> 
Hide Modal -> 

********** 26 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFabButton'.
Drag & Drop this newly added component and place it inside the 'fab1list' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFabButton.addnote' component.
Name -> addnote
ParentID -> fab1list
Color -> tertiary

********** 27 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFireEvent'.
Drag & Drop this newly added component and place it inside the 'addnote' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFireEvent.addnoteevent' component.
Name -> addnoteevent
ParentID -> addnote
TargetID -> addnote
Event Name -> Click
Add Attribute (JSON) -> modal1toolbar:color:tertiary
Set Text (JSON) -> modal1title:Add Note
Set Value (JSON) -> textarea1:;
txtnoteid:;
Show Action Sheet -> 
Show Alert -> 
Show Loading -> 
Show Modal -> modal1
Show Page -> 
Show Pop Over -> 
Show Toast -> 
Hide Action Sheet -> 
Hide Alert -> 
Hide Modal -> 

********** 28 **********

Right click 'Add View', then 'Custom View', then click 'SHIonAlert'.
Drag & Drop this newly added component and place it inside the 'homecontent' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonAlert.alert1' component.
Name -> alert1
ParentID -> homecontent
Alert Type -> yes-no
Header -> Confirm Delete
Message -> Are you sure that you want to delete this note?

********** 29 **********

********** 30 **********

********** 31 **********

Right click 'Add View', then 'Custom View', then click 'SHIonModal'.
Drag & Drop this newly added component and place it inside the 'homecontent' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonModal.modal1' component.
Name -> modal1
ParentID -> homecontent
Has Header -> true
Header Title -> Add Note
Content Ion Padding -> true
Confirm Text -> Apply
Breakpoints (;) -> 0;0.5
Initial Breakpoint -> 0.5
Trigger -> addnote

********** 32 **********

Right click 'Add View', then 'Custom View', then click 'SHIonHeader'.
Drag & Drop this newly added component and place it inside the 'modal1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonHeader.modal1header' component.
Name -> modal1header
ParentID -> modal1

********** 33 **********

Right click 'Add View', then 'Custom View', then click 'SHIonToolbar'.
Drag & Drop this newly added component and place it inside the 'modal1header' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonToolbar.modal1toolbar' component.
Name -> modal1toolbar
ParentID -> modal1header

********** 34 **********

Right click 'Add View', then 'Custom View', then click 'SHIonTitle'.
Drag & Drop this newly added component and place it inside the 'modal1toolbar' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonTitle.modal1title' component.
Name -> modal1title
ParentID -> modal1toolbar
Text -> Add Note

********** 35 **********

Right click 'Add View', then 'Custom View', then click 'SHIonButtons'.
Drag & Drop this newly added component and place it inside the 'modal1toolbar' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonButtons.modal1startbuttons' component.
Name -> modal1startbuttons
ParentID -> modal1toolbar
Slot -> start

********** 36 **********

Right click 'Add View', then 'Custom View', then click 'SHIonButton'.
Drag & Drop this newly added component and place it inside the 'modal1startbuttons' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonButton.modal1cancel' component.
Name -> modal1cancel
ParentID -> modal1startbuttons
Text -> Cancel

********** 37 **********

Right click 'Add View', then 'Custom View', then click 'SHIonButtons'.
Drag & Drop this newly added component and place it inside the 'modal1toolbar' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonButtons.modal1endbuttons' component.
Name -> modal1endbuttons
ParentID -> modal1toolbar
Slot -> end

********** 38 **********

Right click 'Add View', then 'Custom View', then click 'SHIonButton'.
Drag & Drop this newly added component and place it inside the 'modal1endbuttons' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonButton.modal1confirm' component.
Name -> modal1confirm
ParentID -> modal1endbuttons
Text -> Apply
Strong -> true

********** 39 **********

Right click 'Add View', then 'Custom View', then click 'SHIonContent'.
Drag & Drop this newly added component and place it inside the 'modal1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonContent.modal1content' component.
Name -> modal1content
ParentID -> modal1

********** 40 **********

Right click 'Add View', then 'Custom View', then click 'SHIonInput'.
Drag & Drop this newly added component and place it inside the 'modal1content' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonInput.txtnoteid' component.
Name -> txtnoteid
ParentID -> modal1content
Fill -> outline
Label -> NoteID
Label Placement -> stacked
Mode -> md
Styles (JSON) -> margin-bottom:20px

********** 41 **********

Right click 'Add View', then 'Custom View', then click 'SHIonTextarea'.
Drag & Drop this newly added component and place it inside the 'modal1content' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonTextarea.textarea1' component.
Name -> textarea1
ParentID -> modal1content
Fill -> outline
Label -> Note
Label Placement -> stacked
Mode -> md
Placeholder -> Enter your note content here
Rows -> 5

