Introduction:
While building a table in SAPUI5, I faced the challenge of allowing users to select only one row at a time, while also ensuring a clean and intuitive interface. This led me to explore two approaches for implementing single-row selection using SingleToggle and a custom single-selection with checkboxes approach.
The goal was simple: Allow users to select only one row at a time. However, I also needed to give them a checkbox interface, which led me to try two solutions.
Option 1: Using SingleToggle
SAPUI5 offers a built-in SingleToggle selection mode that works well when you don’t need checkboxes and only need to highlight one row at a time.
XML View:
<ui:Table
id=”appointmentTable”
rows=”{globalModel>/uiData/Orders/Appointments}”
selectionMode=”SingleToggle”
rowSelectionChange=”.onAppointmentRowSelectionChange”
enableColumnReordering=”false”
rowHeight=”48″
columnHeaderHeight=”56″
class=”sapUiTinyMarginBottom”>
</ui:Table>
How it’s works?
Only one row can be selected.
Clicking the same row again deselects it.
No checkboxes; just row highlighting.
SingleToggle is perfect for simple selection without checkboxes.
Option 2: Custom Single Selection with Checkboxes
When users expect checkboxes, but you still want to limit selection to one row, you can use MultiToggle mode combined with a custom event handler.
XML View:
<ui:Table
id=”appointmentTable”
rows=”{globalModel>/uiData/Orders/Appointments}”
selectionMode=”MultiToggle”
rowSelectionChange=”.onAppointmentRowSelectionChange”
enableColumnReordering=”false”
rowHeight=”48″
columnHeaderHeight=”56″
class=”sapUiTinyMarginBottom”>
</ui:Table>
Controller Logic:
onAppointmentRowSelectionChange: function (oEvent) {
this.oAppointmentTable = oEvent.getSource();
const aSelectedIndices = this.oAppointmentTable.getSelectedIndices();
if (aSelectedIndices.length > 1) {
const iLastIndex = oEvent.getParameter(“rowIndex”);
this.oAppointmentTable.clearSelection();
this.oAppointmentTable.addSelectionInterval(iLastIndex, iLastIndex);
}
}
How it’s works?
Only one checkbox is selected at a time
Shows checkboxes for selection
Provides intuitive user experience
This custom solution allows for single selection with checkboxes, giving users a familiar UI while ensuring only one row is selected.
Choosing the Right Approach
Use CaseRecommended Option
Simple highlight-only single selectionSingleToggleNeed checkboxes but still restrict to a single selectionCustom handler (as shown above)
Concluding Thoughts!
SAPUI5 gives us flexibility for row selection. If we just need single selection without checkboxes, SingleToggle is the way to go. However, if checkboxes are required, the custom handler approach ensures users can only select one row at a time while maintaining a clean UX.
Both solutions are simple to implement and offer clear user interactions. This is how I approached the issue, but if you have any other suggestions or methods for handling this, please feel free to share them here. I would love to learn from your experience too!
Thank you for taking the time to read this blog! If you found this helpful, please feel free to share your thoughts, feedback or questions in the comments. Let’s keep learning and growing together!
Dear experts, I’m new to blogging, please feel free to correct me if any information is inaccurate.
Introduction:While building a table in SAPUI5, I faced the challenge of allowing users to select only one row at a time, while also ensuring a clean and intuitive interface. This led me to explore two approaches for implementing single-row selection using SingleToggle and a custom single-selection with checkboxes approach.The goal was simple: Allow users to select only one row at a time. However, I also needed to give them a checkbox interface, which led me to try two solutions. Option 1: Using SingleToggleSAPUI5 offers a built-in SingleToggle selection mode that works well when you don’t need checkboxes and only need to highlight one row at a time.XML View:<ui:Table
id=”appointmentTable”
rows=”{globalModel>/uiData/Orders/Appointments}”
selectionMode=”SingleToggle”
rowSelectionChange=”.onAppointmentRowSelectionChange”
enableColumnReordering=”false”
rowHeight=”48″
columnHeaderHeight=”56″
class=”sapUiTinyMarginBottom”>
</ui:Table>How it’s works?Only one row can be selected.Clicking the same row again deselects it.No checkboxes; just row highlighting. SingleToggle is perfect for simple selection without checkboxes. Option 2: Custom Single Selection with CheckboxesWhen users expect checkboxes, but you still want to limit selection to one row, you can use MultiToggle mode combined with a custom event handler.XML View:<ui:Table
id=”appointmentTable”
rows=”{globalModel>/uiData/Orders/Appointments}”
selectionMode=”MultiToggle”
rowSelectionChange=”.onAppointmentRowSelectionChange”
enableColumnReordering=”false”
rowHeight=”48″
columnHeaderHeight=”56″
class=”sapUiTinyMarginBottom”>
</ui:Table>Controller Logic:onAppointmentRowSelectionChange: function (oEvent) {
this.oAppointmentTable = oEvent.getSource();
const aSelectedIndices = this.oAppointmentTable.getSelectedIndices();
if (aSelectedIndices.length > 1) {
const iLastIndex = oEvent.getParameter(“rowIndex”);
this.oAppointmentTable.clearSelection();
this.oAppointmentTable.addSelectionInterval(iLastIndex, iLastIndex);
}
}How it’s works?Only one checkbox is selected at a timeShows checkboxes for selectionProvides intuitive user experienceThis custom solution allows for single selection with checkboxes, giving users a familiar UI while ensuring only one row is selected. Choosing the Right ApproachUse CaseRecommended OptionSimple highlight-only single selectionSingleToggleNeed checkboxes but still restrict to a single selectionCustom handler (as shown above) Concluding Thoughts!SAPUI5 gives us flexibility for row selection. If we just need single selection without checkboxes, SingleToggle is the way to go. However, if checkboxes are required, the custom handler approach ensures users can only select one row at a time while maintaining a clean UX.Both solutions are simple to implement and offer clear user interactions. This is how I approached the issue, but if you have any other suggestions or methods for handling this, please feel free to share them here. I would love to learn from your experience too!Thank you for taking the time to read this blog! If you found this helpful, please feel free to share your thoughts, feedback or questions in the comments. Let’s keep learning and growing together!Dear experts, I’m new to blogging, please feel free to correct me if any information is inaccurate. Read More Technology Blog Posts by Members articles
#SAP
#SAPTechnologyblog
