DEV Community: Ladislav Szolik

Building app using Power Apps in teams

Ladislav Szolik — Thu, 15 Feb 2024 20:03:17 +0000

Intro

A teacher, who is a friend of mine, wants to digitalise the school. As a first step we wanted change the way teachers take student’s attendance. His wish was to keep the price of the software as low as possible, so I set a challenge do keep it 0.

They use Microsoft Office together with Microsoft Teams and I found out that you can build an app inside of Teams for free. It can be found inside Teams Apps, and Power Apps:

I used Dataverse database, which is database provided by Power Apps Teams integration, also completely free.

Requirements from the teachers

The app should allow teachers to perform the following actions:
Core:

Take class attendance for a specific class having specific subject on a specific date
View and filter already recorded attendances

Support:

Create, modify and delete class names.
Search and assign students to class.
Create, modify and delete subjects.

To fulfil these requirements I solved these questions:

How can I access all students?

One option is to let the teacher enter student data manually, but come on, it is 2024, we can do better.
Each student uses Teams and Power Apps app has access to them.

The screen to manage students in classes looks like this:

The classes are coming from “ClassNames” table, see (Tables I created…)

Add Office365Users connector:

Use autocomplete to easily find students

I used gallery component “AutocompleteGallery” to show the user suggestions based on an entered text:

Filter(Office365Users.SearchUser({searchTerm: *SearchUserInput*.Value, top: 5}),!IsBlank(UserPrincipalName))

The search text I take from an input field. This component just need a name “SearchUserInput”. Power Apps takes care of the rest.

Store students in a class

The next step is to add a selected student into a class. The autocomplete gallery has the following OnSelect event to actually store the selected Office User:

Patch(Classes,{UserId: ThisItem.Id, GivenName: ThisItem.GivenName, Surname: ThisItem.Surname, Mail:ThisItem.Mail, ClassName:SelectedClassName.Selected});

Reset(SearchUserInput)

Finally, I used other gallery component “ClassGallery” to show the stored students in the class:

SortByColumns( Filter(Classes, ClassName.NameOfClass = SelectedClassName.Selected.NameOfClass) , "cr15e_surname" )

Remark: It took me some time to get to use to how Power Apps work. First you display the list and add inputs and controls to alter the list content. Here I show students from Office, but I filter them using the input field.

How should I store the attendance records?

Requirements

Teacher selects a date, a class and a subject, then each student should have a record saying whether he was there or not.
Teacher should be able to simple modify these records (if a students shows up 5 minutes later).

These tables I created to fulfil the requirements

The “AbsenceRecords” table, which holds the actual record of absence looks like this (it took few iterations until I came up with this):

Of course before that I needed to create all the related tables.

“Class” table where I store the students:

This table contains the copy of office users (students). I accessed them using the Office365Users connector (showed you above how). It also holds a reference to the “ClassNames” table.

“ClassNames” table serves as a simple way to manage the class names. I guess there are many ways how you can mark the classes, I wanted to use Power Apps Choice, but I could not make it work.

The last table required for the “AbsenceRecords” table to function was the “Subjects” table.

“Subjects” table is also a very simple, it holds the name of each school subject.

The status “Present, Absent, Late, Excused” I managed to solve with Choice. As a table column looks like this:

And the choice itself, is looking like this:

How to build the UI for attendance taking?

The challenge was to display and save “Present” state at first time for the selected class. And allow modifications later.

I added 3 input fields to set Date, Class and Subject of the recording.

Added the Gallery component to simple display the records filtered based on the 3 inputs:

// Students gallery

// AddColumns was required to make Table Relationships accessible for the app.
SortByColumns(
    Filter(
        AddColumns(AbsenceRecords, "ClassNameId", Class.ClassName.Id, "Surname", Class.Surname),
        ClassNameId = ClassComboBox.Selected.Id,
        RecordDate = Datum.Value,
        Subject.Id = SubjectComboBox.Selected.Id
    ),
    "Surname"
)

The Button component “StartButton” starts the first time recording. OnSelect action creates all the records based on the 3 Input fields:

// MyTable creates an in memory table
ClearCollect(
    MyTable,
    Filter(
        AddColumns(
            Classes,
            "ClassNameId",
            ClassName.Id
        ),
        ClassNameId = ClassComboBox.Selected.Id
    )
);

// For all is "patching" means inserting the records to the database
ForAll(
    MyTable,
    Patch(
        [@AbsenceRecords],
        {
            Subject: SubjectComboBox.Selected,
            RecordDate: Datum.Value,
            Class: ThisRecord
        }
    )
);

Once the Gallery is filled with data, you see 4 buttons: Present, Absent, Late and Excused.

Each button has an OnSelect event that updates the given row:


Patch(
    AbsenceRecords,
    LookUp(
        AbsenceRecords,
        Id = ThisItem.Id
    ),
    {RecordStatus: AbsenceStatus.Excused}
);

Additionally, I indicate which status is currently set by simple switching the ButtonType:

If(ThisItem.RecordStatus = AbsenceStatus.Excused, "Primary", "Secondary")

Error handling can be included if necessary….

How to show all the attendances?

The final screen looks like this:

This screen could have been so simple, but instead I needed to include the percentage of absences per student. On top of that, there should be a filter. Makes sense for the teacher, was a nightmare for me. Anyways, the final gallery component has the following Items:

SortByColumns(
AddColumns(
    GroupBy(
        Filter(
            AddColumns(
                AbsenceRecords,
                "StudentId",
                Class.Id,
                "GivenName",
                Class.GivenName,
                "Surname",
                Class.Surname,
                "ClassNameId",
                Class.ClassName.Id,
                "Choices",
                RecordStatus
            ),

            If(
                IsBlank(SubjectsFilterCombox.Selected),
                true,
                Subject.Id = SubjectsFilterCombox.Selected.Id
            ),
            If(
                IsEmpty(ClassFilterCombox.SelectedItems),
                true,
                ClassNameId = ClassFilterCombox.Selected.Id
            ),
            If(
                IsBlank(DateFilterPicker.Value),
                true,
                RecordDate = DateFilterPicker.Value
            ),
              If(
                IsEmpty(StudentFilterCombox.SelectedItems),
                true,
                Class.Mail = StudentFilterCombox.Selected.Mail
            )
        ),        
        "StudentId",
        "GivenName",
        "Surname",
        "Students"
    ),
    "SumOfPresent",
    CountIf(
        Students,
        Choices = AbsenceStatus.Present
    ),
    "SumOfAbsent",
    CountIf(
        Students,
        Choices = AbsenceStatus.Absent
    ),
    "SumOfExcused",
    CountIf(
        Students,
        Choices = AbsenceStatus.Excused
    ),
    "SumOfLate",
    CountIf(
        Students,
        Choices = AbsenceStatus.Late
    ),
    "Ratio",
    CountRows(Students)
), "Surname")

How should a teacher manage class names and school subjects?

Power Apps has out of the box UI where you select the data source and it automatically generates a screen with a list and form to manipulate the list. I used for both tables this feature:

How should a teacher navigate between screens?

As you saw on the print screens, I used tabs. This component is from the “Modern” component library of Power Apps.

I set the tab labels and the navigation at the OnStart event of the App:

// OnStart
ClearCollect(
    topNavItems,
    [
        {label: "Absenz aufnehmen", screen: TakeAttendance},
        {label:"Alle Absenzen", screen:ViewAttendances},
        {label:"Klassen Namen", screen:ViewClassNames},
        {label:"Studenten",screen: ViewStudents},
        {label:"Fächer",screen:ViewSubjects}
    ]
)

Then I set the following OnSelect event for the tabs component:

Set(varCurrentNav, Self.Selected);
Navigate(Self.Selected.screen, ScreenTransition.Fade)

Publish

They made it super easy:

Attention: I was using production database in the app builder. I did not figure out how to have a test database.

Conclusion

I hope it was helpful for you. I haven’t explained here every detail, but I am happy to answer any question.

Introduction

Ladislav Szolik — Tue, 31 Jan 2023 15:26:29 +0000

About the final app

In this series I will share my experience building a fully functional app, listed on the App Store. This app is an expense tracker called Expenny Link to App Store. The following features are included:

read & store data from Core Data
use form controls like: TextField, DatePicker and Picker
display data as Segmented (Grouped) list with filter
use form controls with bindings to save new item and to edit existing items
use of sheet and navigation stack

Future plans:

Support for different currencies
Add charts to visualise historical data
Add ML to predict certain user actions

What I needed?

Figma to design the logo and wireframes for the app
xcode installed on my macbook
Developer license to ship the app and to test on real devices
an iPhone to test

Starting

Getting to know the platform and the framework

Before I had any idea what I will build, I was curious about iOS design updates and I watched some Videos form Apple's WWDC. These recordings have high quality and you can find references in the developer documentation. For building this app, the following videos were specially useful:

What's new in SwiftUI
Hello Swift Charts (in the end I skipped charts from the app for now)
The SwiftUI cookbook for navigation
Bring Core Data concurrency to Swift and SwiftUI

Coming up with an idea

The WWDC videos inspired me to build something. I did not wanted to do customer research for that and I did not wanted to build the next Instagram or Facebook. Just something small. I knew my partner wanted to track her expenses. We wanted to know how much we spend on restaurants, petrol, etc.

If you struggle to come up with an idea, you can reach out to me, happy to help.

Next, I opened Figma and visualised what I am going to build:

This exercise helped me to come up with the following list of user features:

Enter expense amount (for now without currency)
Set expense date (today's date preselected)
Choose expense category
Manage categories
View expenses per month, per category
Edit and delete expenses

Playing with SwiftUI

I am a beginner in the world of Swift or SwiftUI development. So I created many small projects where I built small parts of the app.

I started with the form, where the user enters the expense, then I moved to displaying the list of expenses and lastly to modify the list, adding categories, etc.

In general, when I know beforehand what features I will build, I prepare proof of concepts for them in separation. This way is easier to play with edge cases to see if it would even work.

To build the new expense form, I experimented with TextField to learn:

How to display a full width TextField?
How to limit to enter only numbers?
How to show the keyboard when the user arrives on the page?
How to hide the keyboard?

In the next post of this series I will share my answers to these questions and additionally how I built the entire new expense form.

Career crisis

Ladislav Szolik — Mon, 14 Mar 2022 14:50:05 +0000

In this short post I wanted to share with you an obstacle I face and my thinking around it.

I started to work full-time in 2011 as a Java developer. My first project was a giant software for tax department. Very complex, very boring. Actually I wanted to quit and do illustration instead.

Since 2011 instead of quitting I switched roles from Scrum Master, Frontend developer, Dev Ops to UX design. It was actually nice to see the industry from different perspectives. However now I face with a big problem: Where to go next? What is the next step in my professional life?

I became comfortable with my role and knowledge => I am not growing anymore. Of course I share what I learned with my colleagues (or anyone who is interested).

In my mind the next step is to do my own business. In the last 5 years I took courses, read books, talked with business owners and I tried to ship that first version. I still failing make it happen.

I saw other people got so desperate, that they want to do work for free, just to start somehow and later have trouble to get paid. I aim to avoid that...

I am searching the answer for these questions:

What to do if you don't see any opportunity in your surrounding which is small enough to get started, but can grow to sustain you?
What to do if you have only few connections and they are very different from you or they are not interested in the things you make?

P.S. After so much business/startup research, whenever I have a new idea, I feel like my mind can think only in slogans and landing pages. It might not be healthy anymore, I guess I will have to take a break.

Why enterprise software is so bad?

Ladislav Szolik — Tue, 08 Mar 2022 20:44:20 +0000

Why most enterprise apps are so bad? ... I was thinking about this recently.

Both, MS Outlook and MS Teams are super slow on the Mac. It is noticeable that they are not native apps and they are buggy. For MS Teams sometimes even the cmd+Tab does not work.

Another example are Jira and Confluence web applications. They both are very complex and require employee training.

I believe, Microsoft and Atlassian have many smart developers, yet quality of these apps is ... off, why?

I've worked on complex applications and I noticed a certain requiring theme:

The stakeholders want to deliver on their imaginary deadline
They find weird ways to reduce the budget

The result? > The pressure they create cascades to the developers. Maybe not all developers are skilled, or maybe they are distracted by the large amount of meetings thanks to agile. The quality of their work goes down and the new software quickly becomes yet another slow legacy system which is hard to maintain.

The project becomes so painful that people start to leave. The new hires spend their energy to understand the mess, but eventually they get tired too and the circle continues.

Of course, the salary is good, so there will be always somebody who is willing to struggle with that app for 2-3 years.

Maybe sometimes we could ask ourselves more often if we want to continue on this route... I think we always have a choice.

P.S. https://dev.to is an example of good software.

A minimal CMS for jamstack blogging

Ladislav Szolik — Wed, 09 Jun 2021 19:29:56 +0000

The problem the project tries to solve

I made my homepage using a static page generator 11ty. The blogs and project documentations are written in a Markdown about markdown. These documents the page generator transforms into static HTML.

It is super easy to write them in my code editor connected to github. Sometimes I would like to write & publish on the go using my tablet or iPhone.

The solution

an responsive web app written in vanilla JS. It connects to your github using github's octokitjs library.

Printscreens

Prerequisites

A github based project (basically a new commit triggers a new deployment)
Personal access tokens has been generated Guide to create one
nodejs installed

Usage

as of now you would need to clone the repository: git clone https://github.com/LadislavSzolik/cms4devs.git
install dependencies with node: npm isntall
adapt the repository settings to your needs
build it for production: npm run build
copy the generated output to your project

Feedback

THis project is work in progress. However if you find it useful for you, let me know about the challenges you while using it.

Thanks

Learning from dev courses...or from side projects?

Ladislav Szolik — Tue, 13 Apr 2021 19:43:03 +0000

I love to complete a good course on software development or design. It makes me feel that I learned something new and I feel confident about it. 💪

This last until I face a project and I realize I either forgot some parts or I don't know how to use it here.

First I thought, the is a problem with my note taking technique or the course material...

Then recently a friend asked me to build a web app for her small business. It was all on me:

hosting
landing page
brand + UI design
database design
authentication
mails
i18n
etc.

In that half year of discussions, design and development I feel learned a tons and I thought to share with you.

Having a stake in the game changed the way I build knowledge.

If you haven't been responsible to build something for somebody else, I can highly recommend! Even more, I am always happy to collaborate!

Use of mental models

Ladislav Szolik — Sat, 10 Apr 2021 07:57:13 +0000

Mental models give us a shorthand to know how things work around us. Our brain constantly creates them to help us managing our life. This is a good thing, if the model is useful and help us move forward!

In software design, people love to invent new terms for already existing things. That is so far okay. Then they re-explain it as it was new and problem happens when they convince others that is available only to certain people...

When a developers says: I don't know how to do UX. I just implement the code, I am not a creative kind. This person often times has an image about a UX Designer, who effortlessly comes up with creative ideas and design wonderful screens and exactly knows what the user want. This is not empowering.

Of course the reality might be different. Still that model exist in the dev's mind and it might block her to level up.

Useful mental models like performance, authentication ... are super useful, but for some other models we might need to dig deeper to re validate our understanding.