B4J Tutorial [Web] [SithasoDaisy5] Using the Office Ribbon Component in your projects.

Hi Fam

I've found this amazing Office Ribbon component from Syncfusion... been exploring how to add it in an easy fashion to SithasoDaisy5. Fortunately one is able just to select the components they need and include them in their app. One needs to get a free account and license to use the components.

Step 1

Add a ribbon component to your page layout.

Step 2: Add Tabs, i.e. Home, Insert, View

Step 3: Add Groups to Tabs

Step 4: Add Collections to Groups. The font Group has 2 collections, 1 collection has the input components and the other has button icons.

Steo 5: Add items to the collections, e.g. SplitButton, Buttons, ComboBoxes, CheckBoxes etc.

 

[Mashiane]

Home > Clipboard

SDUI5OfficeRibbon1.AddTab("home", "Home", "", "")
    SDUI5OfficeRibbon1.AddGroup("home", "clipboard", "Clipboard", "e-icons e-paste", True)
    SDUI5OfficeRibbon1.AddCollection("home.clipboard", "col1", "")
   
    Dim pasteItems As List
    pasteItems.Initialize
    pasteItems.Add(CreateMap("text": "Keep Source Format"))
    pasteItems.Add(CreateMap("text": "Merge format"))
    pasteItems.Add(CreateMap("text": "Keep text only"))
    SDUI5OfficeRibbon1.AddSplitButtonLarge("home.clipboard.col1", "paste", "e-icons e-paste", "Paste", pasteItems)
    '
    SDUI5OfficeRibbon1.AddButton("home.clipboard.col1", "cut", "e-icons e-cut", "Cut")
    SDUI5OfficeRibbon1.AddButton("home.clipboard.col1", "copy", "e-icons e-copy", "Copy")
    SDUI5OfficeRibbon1.AddButton("home.clipboard.col1", "formpainter", "e-icons e-format-painter", "Format Painter")

 

[Mashiane]

Home > Font

SDUI5OfficeRibbon1.AddGroup("home", "font", "Font", "e-icons e-bold", False)
    SDUI5OfficeRibbon1.SetGroupEnableGroupOverflow("home.font", True)
    SDUI5OfficeRibbon1.SetGroupOrientationRow("home.font")
    SDUI5OfficeRibbon1.SetGroupCssClass("home.font", "font-group")
    SDUI5OfficeRibbon1.AddCollection("home.font", "col1", "")
    '
    Dim fontSize As List
    fontSize.Initialize
    fontSize.AddAll(Array("8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"))
    '
    Dim fontStyle As List
    fontStyle.Initialize
    fontStyle.AddAll(Array("Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings"))
   
    SDUI5OfficeRibbon1.AddComboBox("home.font.col1", "fontname", fontStyle, 3, True, "150px") 
    SDUI5OfficeRibbon1.AddComboBox("home.font.col1", "fontsize", fontSize, 3, True, "65px")
    '
    SDUI5OfficeRibbon1.AddCollection("home.font", "col2", "")
    SDUI5OfficeRibbon1.AddButtonIcon("home.font.col2", "bold", "e-icons e-bold", "Bold")
    SDUI5OfficeRibbon1.AddButtonIcon("home.font.col2", "italic", "e-icons e-italic", "Italic")
    SDUI5OfficeRibbon1.AddButtonIcon("home.font.col2", "underline", "e-icons e-underline", "Underline")
    SDUI5OfficeRibbon1.AddButtonIcon("home.font.col2", "strikethrough", "e-icons e-strikethrough", "Strike Through")
    SDUI5OfficeRibbon1.AddButtonIcon("home.font.col2", "case", "e-icons e-change-case", "Change Case")

 

[Mashiane]

Home > Editor

SDUI5OfficeRibbon1.AddGroup("home", "editor", "Editor", "", False)
    SDUI5OfficeRibbon1.SetGroupCollapsible("home.editor", False)
    SDUI5OfficeRibbon1.AddCollection("home.editor", "col1", "")
    SDUI5OfficeRibbon1.AddButtonLarge("home.editor.col1", "editor", "e-icons e-edit", "Editor")

 

[Mashiane]

Insert (Tables / Illustrations / Media)

SDUI5OfficeRibbon1.AddTab("insert", "Insert", "", "")
    SDUI5OfficeRibbon1.AddGroup("insert", "tables", "Tables", "", False).SetGroupCollapsible("insert.tables", False)
    SDUI5OfficeRibbon1.AddCollection("insert.tables", "col1", "")
   
    Dim tableItems As List
    tableItems.Initialize
    tableItems.Add(CreateMap("text": "Insert Table"))
    tableItems.Add(CreateMap("text": "Draw Table"))
    tableItems.Add(CreateMap("text": "Convert Table"))
    tableItems.Add(CreateMap("text": "Excel SpreadSheet"))
    SDUI5OfficeRibbon1.AddSplitButtonLarge("insert.tables.col1", "table", "e-icons e-table", "Table", tableItems)
    '
    SDUI5OfficeRibbon1.AddGroup("insert", "illustrations",  "Illustrations", "e-icons e-image", False)
    SDUI5OfficeRibbon1.SetGroupEnableGroupOverflow("insert.illustrations", True)
    SDUI5OfficeRibbon1.SetGroupOrientationRow("insert.illustrations")
    SDUI5OfficeRibbon1.AddCollection("insert.illustrations", "col1", "")
    SDUI5OfficeRibbon1.AddButton("insert.illustrations.col1", "chart", "e-icons e-chart", "Chart")
    '
    SDUI5OfficeRibbon1.AddGroup("insert", "media",  "Media", "", False)
    SDUI5OfficeRibbon1.SetGroupCollapsible("insert.media", False)
    SDUI5OfficeRibbon1.AddCollection("insert.media", "col1", "")
    SDUI5OfficeRibbon1.AddButton("insert.media.col1", "video", "e-icons e-video", "Video")

 

[Mashiane]

View > Views

SDUI5OfficeRibbon1.AddTab("view", "View", "", "")
    SDUI5OfficeRibbon1.AddGroup("view", "views",  "Views", "e-icons e-print", False)
    SDUI5OfficeRibbon1.SetGroupOrientationRow("view.views")
    SDUI5OfficeRibbon1.AddCollection("view.views", "col1", "")
    SDUI5OfficeRibbon1.AddButton("view.views.col1", "printlayout", "e-print e-icons", "Print Layout")
    SDUI5OfficeRibbon1.AddButton("view.views.col1", "weblayout", "e-icons e-web-layout", "Web Layout")

 

[Mashiane]

View > Show

SDUI5OfficeRibbon1.AddGroup("view", "show", "Show", "", False)
    SDUI5OfficeRibbon1.SetGroupCollapsible("view.show", False)
    SDUI5OfficeRibbon1.AddCollection("view.show", "col1", "")
    '
    SDUI5OfficeRibbon1.AddCheckBox("view.show.col1", "ruler", "Ruler", False)
    SDUI5OfficeRibbon1.AddCheckBox("view.show.col1", "gridlines", "Gridlines", False)
    SDUI5OfficeRibbon1.AddCheckBox("view.show.col1", "navigationpane", "Navigation Pane", True)

 

[Mashiane]

Setting up the File Menu

SDUI5OfficeRibbon1.AddFileMenuItem("new", "New", "e-icons e-file-new")
    SDUI5OfficeRibbon1.AddFileMenuItem("open", "Open", "e-icons e-folder-open")
    SDUI5OfficeRibbon1.AddFileMenuItem("rename", "Rename", "e-icons e-rename")
    SDUI5OfficeRibbon1.AddFileMenuItem("save", "Save", "e-icons e-save")

 

[Mashiane]

Trapping Events

Building the Tab

Sub BuildRibbonSettings
    ribbon.AddTab("settings", "Settings", "", "")
    ribbon.AddGroup("settings", "lists", "Lists", "fa-solid fa-screwdriver-wrench", False)
    
    ribbon.AddCollection("settings.lists", "col1", "")
    ribbon.AddButtonMedium("settings.lists.col1", "provinces", "fa-solid fa-screwdriver-wrench", "Provinces")
    ribbon.AddButtonMedium("settings.lists.col1", "municipalities", "fa-solid fa-screwdriver-wrench", "Municipalities")
    ribbon.AddButtonMedium("settings.lists.col1", "townships", "fa-solid fa-screwdriver-wrench", "Townships")
    '
    ribbon.AddCollection("settings.lists", "col2", "")    
    ribbon.AddButtonMedium("settings.lists.col2", "projectroles", "fa-solid fa-screwdriver-wrench", "Project Roles")
    ribbon.AddButtonMedium("settings.lists.col2", "educationlevels", "fa-solid fa-screwdriver-wrench", "Education Levels")
    ribbon.AddButtonMedium("settings.lists.col2", "educationalinstitutions", "fa-solid fa-screwdriver-wrench", "Educational Institutions")
    '
    ribbon.AddCollection("settings.lists", "col3", "")
    ribbon.AddButtonMedium("settings.lists.col3", "qualifications", "fa-solid fa-screwdriver-wrench", "Qualifications")
    ribbon.AddButtonMedium("settings.lists.col3", "documenttypes", "fa-solid fa-screwdriver-wrench", "Document Types")
    
End Sub

Trapping Events

private Sub ribbon_provinces (args As Map)
    App.ShowToastInfo("provinces")
End Sub

private Sub ribbon_municipalities (args As Map)
    App.ShowToastInfo("municipalities")
End Sub

private Sub ribbon_townships (args As Map)
    App.ShowToastInfo("townships")
End Sub

private Sub ribbon_projectroles (args As Map)
    App.ShowToastInfo("project roles")
End Sub

private Sub ribbon_educationlevels (args As Map)
    App.ShowToastInfo("education levels")
End Sub

private Sub ribbon_educationalinstitutions (args As Map)
    App.ShowToastInfo("educational institutions")
End Sub

private Sub ribbon_qualifications (args As Map)
    App.ShowToastInfo("qualifications")
End Sub

private Sub ribbon_documenttypes (args As Map)
    App.ShowToastInfo("document types")
End Sub