1

00:00:00,700 --> 00:00:02,470

Well, hello, my dear friends.



2

00:00:03,010 --> 00:00:08,200

So in this lesson, we are going to design or manage employees screen with Kudi creator.



3

00:00:08,890 --> 00:00:10,270

So let's get started.



4

00:00:12,310 --> 00:00:16,420

So we're going to go to edit forms and add a new UI item.



5

00:00:22,700 --> 00:00:25,430

And choose main window should travel.



6

00:00:25,820 --> 00:00:29,180

It's named manage employee, OK?



7

00:00:38,060 --> 00:00:44,420

So now this window will show up when we click the manage employee button from the main menu and we can



8

00:00:44,420 --> 00:00:46,010

probably resize it a bit.



9

00:00:46,310 --> 00:00:49,970

Also, remove the menu bar and the status bar.



10

00:00:50,900 --> 00:00:51,410

OK, good.



11

00:00:52,710 --> 00:00:57,180

So now we're going to need three buttons so we can go back and create a new employee.



12

00:00:58,560 --> 00:01:01,230

So just change the text of no.



13

00:01:01,620 --> 00:01:03,780

And we should also export the table.



14

00:01:04,790 --> 00:01:06,110

Thereby creating a button.



15

00:01:07,760 --> 00:01:11,390

So that we can export the table as a CSV file, right?



16

00:01:12,980 --> 00:01:14,600

So Saenz's buttons, names.



17

00:01:16,040 --> 00:01:20,390

Their names are the back button, new button and export button.



18

00:01:20,960 --> 00:01:21,620

What do you think?



19

00:01:33,630 --> 00:01:38,250

All right, so now we should add some space in order to align all of these buttons on the right.



20

00:01:42,070 --> 00:01:49,000

And choose horizontal space here, and we'll keep the buttons right here and move the space like that.



21

00:01:51,080 --> 00:01:55,130

Cool, so now we can select all these items and right click.



22

00:01:56,810 --> 00:01:57,740

Choose layout.



23

00:01:57,980 --> 00:01:59,420

Choose layout in a grid.



24

00:01:59,960 --> 00:02:02,570

And maybe we can also align them horizontally.



25

00:02:03,960 --> 00:02:12,000

But, you know, I just like the grid layout because, well, sometimes I'll find myself changing the



26

00:02:12,000 --> 00:02:13,080

stretch of a column.



27

00:02:13,350 --> 00:02:16,380

So that's why I like to keep it this way.



28

00:02:16,500 --> 00:02:17,430

For now.



29

00:02:18,930 --> 00:02:19,350

All right.



30

00:02:20,670 --> 00:02:24,310

OK, so let's look at a new table, just the table.



31

00:02:24,330 --> 00:02:31,290

Let's make sure to use the table widget because table view is something else which uses a model.



32

00:02:32,310 --> 00:02:33,060

Stick with me.



33

00:02:34,120 --> 00:02:36,550

And we're not really going to work with that model right now.



34

00:02:36,670 --> 00:02:37,270

So don't worry.



35

00:02:39,340 --> 00:02:39,640

All right.



36

00:02:39,790 --> 00:02:41,290

Let's lengthen them a bit.



37

00:02:43,830 --> 00:02:47,730

And we will also have some filters for the table.



38

00:02:50,530 --> 00:02:59,920

For example, if we have an I.D., write a name, first name and last name and whatever else, we'll



39

00:02:59,920 --> 00:03:05,650

have a few search options when we apply some filters and they'll appear here.



40

00:03:08,640 --> 00:03:10,170

So let's choose a button for this.



41

00:03:11,310 --> 00:03:19,290

We're going to use a tool button because we can set an icon for this way more easily and we want it



42

00:03:19,290 --> 00:03:20,700

to stay over here on the left.



43

00:03:22,030 --> 00:03:23,200

So on other space here.



44

00:03:28,510 --> 00:03:30,640

And select both.



45

00:03:32,270 --> 00:03:33,260

Layout in a grid.



46

00:03:40,930 --> 00:03:46,660

And now we can just right click and go to layout and then go to layout and a grid.



47

00:03:47,380 --> 00:03:48,010

There you go.



48

00:03:48,190 --> 00:03:49,360

Now you can see what it looks like.



49

00:03:53,990 --> 00:03:55,010

Who resides now?



50

00:03:56,210 --> 00:03:58,700

And that looks pretty good so far for me.



51

00:04:00,020 --> 00:04:04,730

So you can see that the table gets resized, but the buttons don't.



52

00:04:06,660 --> 00:04:09,630

And this button here also doesn't get resized.



53

00:04:11,090 --> 00:04:14,210

Cool, so now we can close all this and just rename the layouts.



54

00:04:15,080 --> 00:04:21,710

We can say this, that this is the upper grid layout.



55

00:04:28,140 --> 00:04:34,080

Bottom grid layout, we can probably leave the other ones like this because, wow, we're not really



56

00:04:34,080 --> 00:04:34,950

going to use them anyway.



57

00:04:36,750 --> 00:04:43,860

We could also set a medium size and the maximum size for the window, but there's no need to do that



58

00:04:43,860 --> 00:04:47,100

either because the screen size is just fine to me.



59

00:04:48,180 --> 00:04:50,790

So now there is one more thing, though, that we do have to do.



60

00:04:52,830 --> 00:04:57,060

So when you click this button, it's a filter and the table should appear.



61

00:04:58,170 --> 00:05:01,920

So let me just show you in the form Ed, to choose preview.



62

00:05:03,810 --> 00:05:11,250

So let's say click and the table has an idea, a first name and the last name.



63

00:05:13,610 --> 00:05:21,890

Awesome, so this table is resized, it's diminished in its height, and it's now got some filters for



64

00:05:21,890 --> 00:05:22,520

the idie.



65

00:05:24,500 --> 00:05:26,750

First name, last names should appear right here.



66

00:05:28,800 --> 00:05:31,620

Now, in order to do that, we will need a container.



67

00:05:32,790 --> 00:05:34,420

So let's break this layout.



68

00:05:34,440 --> 00:05:37,170

Let's put this table right here and.



69

00:05:41,340 --> 00:05:45,720

The container, which is a widget, and this widget will contain all these filters.



70

00:05:51,200 --> 00:05:54,980

Which will be some text at its.



71

00:05:59,700 --> 00:06:03,300

So let me just show you a label which will show the ID and.



72

00:06:09,890 --> 00:06:16,170

Let's get to a line edit so line edit, which can also receive some text input.



73

00:06:16,190 --> 00:06:18,410

So let's just copy and paste them in.



74

00:06:24,530 --> 00:06:29,480

For all the employee information, we need the information that we are going to store, and that is



75

00:06:29,480 --> 00:06:35,360

I.D., first name, last name, department, name and position.



76

00:06:52,750 --> 00:06:55,270

So now we have to name the labels.



77

00:06:55,480 --> 00:06:57,400

So why don't we go to the object editor?



78

00:06:58,890 --> 00:07:00,750

And this is the ideal label.



79

00:07:04,380 --> 00:07:05,100

Last name.



80

00:07:12,730 --> 00:07:13,750

First name label.



81

00:07:19,720 --> 00:07:20,890

Department label.



82

00:07:23,750 --> 00:07:24,350

OK.



83

00:07:25,010 --> 00:07:26,300

And position, label.



84

00:07:30,520 --> 00:07:31,150

Good.



85

00:07:32,970 --> 00:07:36,360

All right, so now we need to rename the line edit.



86

00:07:37,710 --> 00:07:39,450

So this is the ID line edit.



87

00:07:43,340 --> 00:07:45,610

First name Lynette.



88

00:07:46,130 --> 00:07:46,820

Similarly.



89

00:07:49,390 --> 00:07:50,680

Department position.



90

00:07:59,560 --> 00:08:00,070

OK.



91

00:08:01,610 --> 00:08:03,680

And I think we're now done.



92

00:08:26,580 --> 00:08:29,460

We can position them in the widget, so select the ID.



93

00:08:30,270 --> 00:08:31,020

The first name.



94

00:08:32,080 --> 00:08:39,100

And we'll arrange them as we will have them in the table columns, so the last names you come here.



95

00:08:40,130 --> 00:08:44,720

And the second column, we're going to have the department and the position.



96

00:08:45,170 --> 00:08:49,190

And for these, we can choose between a formal layout or the grid layout.



97

00:08:51,000 --> 00:08:57,450

And that's right click actually, let's arrange them first, because, you know, the problem is select



98

00:08:57,450 --> 00:09:02,640

all of them and lay out in a grid, but you can see that with a grid layout.



99

00:09:03,690 --> 00:09:05,490

So we do have some problems.



100

00:09:07,560 --> 00:09:09,330

So let's just select all of these.



101

00:09:10,640 --> 00:09:16,220

Let's see what it looks like if we lay out this in the form layout and another form layout.



102

00:09:30,120 --> 00:09:33,420

All right, so now, in my humble opinion, this looks way better.



103

00:09:34,550 --> 00:09:39,710

So so like the widget and layout in a grid and resize it.



104

00:09:41,280 --> 00:09:41,970

All right.



105

00:09:43,290 --> 00:09:45,360

So resize this.



106

00:09:46,470 --> 00:09:54,120

Also, make sure to select the layout, the horizontal spacer, because we can't resize items which



107

00:09:54,120 --> 00:09:56,520

are enclosed into our layout.



108

00:09:56,530 --> 00:09:56,850

Right.



109

00:09:58,280 --> 00:10:00,380

So let's resize this also.



110

00:10:02,460 --> 00:10:05,850

And now we can align all of these items into a grid layout.



111

00:10:09,810 --> 00:10:16,200

All right, so that's it for this in this lesson, we designed our manage employees screen with Kudi



112

00:10:16,200 --> 00:10:20,550

Kreator in the next lesson, we're going to continue to design our program.



113

00:10:20,560 --> 00:10:22,140

So I want to see in the next lesson.



114

00:10:22,770 --> 00:10:23,970

Until then, have a great day.