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.
 
Last edited:
Click to expand...

Mashiane

Expert
Licensed User
Longtime User
Home > Clipboard



B4X: 
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")
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Home > Font



B4X: 
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")
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Home > Editor



B4X: 
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")
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Insert (Tables / Illustrations / Media)



B4X: 
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

Expert
Licensed User
Longtime User
View > Views



B4X: 
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

Expert
Licensed User
Longtime User
View > Show




B4X: 
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

Expert
Licensed User
Longtime User
Setting up the File Menu



B4X: 
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

Expert
Licensed User
Longtime User
Trapping Events



Building the Tab

B4X: 
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

B4X: 
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
 
You must log in or register to reply here.

Similar Threads

  • Article
B4J Code Snippet [SithasoDaisy5] Template B4X Free 2 page
Replies
0
Views
343
MichalK73
  • Article
B4J Tutorial [Web] [SithasoDaisy5] Using LeafLet Maps
Replies
2
Views
778
Mashiane
  • Article
Share My Creation [Web] FamilyTree developed with SithasoDaisy5
Replies
0
Views
708
Mashiane
  • Article
B4J Tutorial [SithasoDaisy5] - Create a WebApp From An Excel Spreadsheet / A Database - Part 1
Replies
5
Views
2K
Mashiane
  • Article
Share My Creation [SithasoDaisy5] - TailwindCSS Grid Builder - Simplifying Layout Creation with Ease
Replies
0
Views
690
Mashiane
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…