My First Sudoku Game in SAPUI5 – A Fun Mini UI5 Project

[Dhanasupriya]

Introduction

Recently I have been playing a lot of Sudoku — both offline and online — and it inspired me to try something different:
Why not build a small Sudoku game using SAPUI5?

This blog shows the first version of my experiment:
a simple 3×3 Sudoku puzzle built with UI5 input controls, dynamic layout, and basic validation logic.
It’s a fun way to practice UI5 concepts while making something interactive.

Implementation

controller.js:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/Input",
    "sap/m/MessageToast"
], function (Controller, Input, MessageToast) {
    "use strict";

    return Controller.extend("com.sudokupuzzle.controller.Sudoku", {

        solution: [1, 2, 3,
                   4, 5, 6,
                   7, 8, 9],

        onInit: function () {
            this.buildGrid();
        },

        buildGrid: function () {
            let grid = this.getView().byId("grid");

            for (let i = 0; i < 9; i++) {
                let cell = new Input({
                    maxLength: 1,
                    type: "Number",
                    width: "100%",
                    class: "threeCell"
                });
                grid.addItem(cell);
            }
        },

        onValidate: function () {
            let grid = this.getView().byId("grid");
            let cells = grid.getItems();
            let allCorrect = true;

            cells.forEach((cell, i) => {
                let val = parseInt(cell.getValue());

                if (val === this.solution[i]) {
                    cell.addStyleClass("correctCell");
                    cell.removeStyleClass("wrongCell");
                } else {
                    allCorrect = false;
                    cell.addStyleClass("wrongCell");
                    cell.removeStyleClass("correctCell");
                }
            });

            if (allCorrect) {
                MessageToast.show("Correct!");
            } else {
                MessageToast.show("Some values are incorrect.");
            }
        }
    });
});

view.xml:

<mvc:View controllerName="com.sudokupuzzle.controller.Sudoku"
    xmlns:mvc="sap.ui.core.mvc" xmlns:l="sap.ui.layout"
    xmlns="sap.m">
 <VBox alignItems="Center" justifyContent="Center" class="sapUiLargeMargin">
        <Button text="Check Puzzle" press=".onValidate" />
        <VBox id="grid" class="threeGrid sapUiMediumMarginTop">
        </VBox>
    </VBox>
    </mvc:View>

style.css:

.correctCell input {
    background-color: #c2ffcc !important;
}

.wrongCell input {
    background-color: #ffcccc !important;
}

.threeGrid {
    display: grid;
    grid-template-columns: repeat(3, 60px);
    grid-template-rows: repeat(3, 60px);
    gap: 6px;
}

.threeCell > input {
    text-align: center;
    font-size: 20px;
}

.threeCell {
    border: 2px solid #555;
    border-radius: 4px;
}

output:

The UI displays a simple 3×3 Sudoku grid.
When the user enters numbers and presses Check Puzzle, each cell is validated and highlighted:

✔ Green for correct
✖ Red for incorrect

Conclusion

This was a fun way to combine SAPUI5 components, layout techniques, and basic validation into a small interactive game.
I plan to expand this with a full 9×9 Sudoku board and maybe try integrating a Sudoku API for random puzzle generation.

Note:
The concept, approach, and all the code examples in this blog were created by me as part of my personal learning experiment with SAPUI5.

Thank you for reading!
// Enhance Learning