Budowanie dashboardu pracownika

Wymóg  

Stwórz pulpit dla pracowników z przyciskami, które pomogą pracownikom zameldować się i wymeldować, znaleźć łączną liczbę przepracowanych godzin i złożyć wniosek o urlop.

Przypadek użycia  

Aplikacja do zarządzania pracownikami ma pulpit nawigacyjny dla swoich pracowników. Gdy tylko pracownik się zaloguje, odnotowywany jest jego czas zameldowania. Podobnie, gdy się wylogują, odnotowywany jest ich czas wymeldowania. W ten sposób ich pełne godziny pracy są obliczane automatycznie. W tym panelu pracownik może również ubiegać się o urlop.

 

Kroki do naśladowania

1.Utwórz formularze z następującymi szczegółami:

Formularz	Nazwa łącza formularza	Typ pola	Nazwa pola	Nazwa łącza pola
Dodaj pracownika	Dodaj_Pracownika	Nazwa	Nazwa	Nazwa
		Email	Oficjalny e-mail	Oficjalny e-mail
		Telefon	Telefon	Numer telefonu
Dodaj szczegóły zameldowania	Add_Check_In_Out_Details	Wyszukiwanie (Add_Employee)	Pracownik	Pracownik
		Data-Godzina	Zameldować się	Zameldować się
		Data-Godzina	Sprawdź	Sprawdź
		Pojedyncza linia	Suma godzin	Suma godzin
Zastosuj urlop         Wakacje	Zastosuj urlop         Wakacje	Wyszukiwanie (Add_Employee)	Pracownik	Pracownik
		Pojedyncza linia	Typ urlopu	Typ urlopu
		Data-Godzina	Z	Z
		Data-Godzina	do	do
		Pojedyncza linia	Nazwa święta	Nazwa święta
		Data	Data	Pole_daty

 

Zanim zaczniemy, dodajmy kilka rekordów do formularza Dodaj pracownika i formularza Święta.

 

Nasz pulpit nawigacyjny pracownika będzie zawierał przyciski do ubiegania się o urlop, zameldowania i wymeldowania, które wykonają odpowiednie czynności. Przyjrzyjmy się im po kolei, zaczynając od akcji Apply Leave.

 

Wypełnimy pole Add Employee formularza Apply Leave jako aktualnie zalogowany użytkownik i wyłączymy je, aby użytkownik nie mógł go zmienić. Stwórzmy przepływ pracy, aby to osiągnąć.

 

2. Utwórz przepływ pracy, który zostanie wykonany podczas ładowania formularza Aplikuj urlop, wypełnij pole Dodaj pracownika adresem e-mail logowania użytkownika i wyłącz go.

 

3. Kliknij Dodaj nową akcję i dodaj poniższy kod w otwartym edytorze Deluge:

1. //Find the ID of the Add_Employee record with the login user email ID
2. input.Employee=Add_Employee[Official_Email==zoho.loginuserid].ID;
   
3. 
   
4. //Disable the Add Employee field
5. disable Employee;

Teraz stwórzmy funkcje do ewidencjonowania i wymeldowania.

 

4.  Utwórz funkcję, aby zaewidencjonować pracownika.

 

5. Dodaj poniższy kod do edytora Deluge:

1. void checkIn()
2. {
3. //Get the logged-in employee record ID
4.  employee = Add_Employee[Official_Email == zoho.loginuserid];
   
5. 
   
6.  //Check if the employee is already checked-in. The critiera Check_In is today is used to check if the Check_In date-time field has date as today (that day)
7. alreadyCheckedIn = Add_Check_In_Out_Details[Employee == employee.ID && Check_In is today];
8. //Insert a record only if there is no check-in
9.  if(alreadyCheckedIn.count() == 0)
10.  {
11.   insert into Add_Check_In_Out_Details
12.   [
13.    Added_User=zoho.loginuser
14.    Employee=employee.ID
15.    Check_In=zoho.currenttime
16.   ]
17.  }
18. }

6. Podobnie utwórz funkcję do wypisania pracownika.

 

7. Dodaj poniższy kod do edytora Deluge:

1. void checkOut()
2. {
3. //Get the logged-in employee record ID
4.  employee = Add_Employee[Official_Email == zoho.loginuserid].ID;
   
5. 
   
6. //Get the Employee's already checked-in record from Add_Check_In_Out_Details 
7.  current_day_entry = Add_Check_In_Out_Details[Employee == employee && Check_In is today];
   
8. 
   
9. //Assign check-out value
10.  current_day_entry.Check_Out=zoho.currenttime;
    
11. 
    
12. //Calculate Total_Hours from the timestamps
13.  time = (current_day_entry.Check_Out - current_day_entry.Check_In);
14.  seconds = time / 1000;
15.  minutes = seconds / 60;
16.  hours = minutes / 60;
17.  h = hours.floor();
18.  m = minutes - h * 60;
19.  mins = m.floor();
20.  if(mins < 10)
21.  {
22.   mins = "0" + mins;
23.  }
    
24. 
    
25. //Set the total working hours
26.  current_day_entry.Total_Hours=h + ":" + mins + " Hrs";
27. }

Teraz, gdy wszystkie nasze funkcjonalności są gotowe, przejdźmy do tworzenia dashboardu.

 

8. Utwórz stronę o nazwie Dashboard . Przeciągnij do niego fragment ZML i fragment kodu HTML.

Sprawdź, czy w załącznikach nie ma pliku z następującymi fragmentami kodu skonsolidowanego w jeden działający skrypt.

Dla lepszego zrozumienia kod ZML/HTML jest podzielony na fragmenty. Wyjaśniamy fragmenty kodu, a następnie rozmieszczamy je odpowiednio w celu wstawienia ich do edytora ZML/HTML.

 

Zacznijmy od fragmentu kodu ZML . Spowoduje to przytrzymanie następujących przycisków: Zastosuj Opuść , Zaewidencjonuj i Wyewidencjonuj .

 

Fragment a

Nazwisko pracownika jest wyświetlane za pomocą tagów <text>. Znacznik <button> służy do tworzenia przycisku Apply Leave, który jednym kliknięciem otworzy formularz Apply Leave.

1. <pr>
2. <pc width='80%' bgColor="#ececec" hAlign="left" paddingLeft="10px"> 
   
3. 
   
4. //Display the name of the logged-in employee  
5.    <text bold='true' value='Welcome <%=getUser.Name%>.' size='5' color='#3d566e' type='Text' textAlign='left'> 
6.    </text>         
7.   </pc>
8.   <pc  width='20%' hAlign='left' padding="10px" vAlign='middle'>       
9.    <pr width='100%' height='fill'>     
10.     <pc hAlign="center">
    
11. 
    
12. //Create a button that will open the Apply Leave form on click
13.      <button bgColor="#3d566e" action='Form' componentLinkName='Apply_Leave' size='1' text="Apply Leave"/>
14.     </pc>
15.    </pr>    
16.   </pc>   
17.  </pr>

Fragment b

Przycisk Zamelduj się powinien być wyświetlany tylko wtedy, gdy pracownik jeszcze się zameldował. Sprawdzimy, czy w polu Dodaj szczegóły zameldowania/wymeldowania jest wpis dla bieżącego pracownika dzisiaj. Jeśli jest dostępny, pokazujemy godzinę zameldowania. Jeśli nie, pokazujemy przycisk Zamelduj. W podobny sposób pokazujemy przycisk Do kasy.

1. <pc  width='33%' hAlign='left' padding="10px" vAlign='middle'>       
2. <pr width='100%' height='fill'>     
3.   <pc hAlign="center">
4. <%
   
5. 
   
6. //Find if the employee has already checked in
7.   alreadyCheckedIn = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today].count(ID);
8.   if(alreadyCheckedIn == 0)
9.   {
   
10. 
    
11. //If employee has not checked in, show the button
12.   %>
    
13. 
    
14. //Button's action is linked to the checkIn function created in Step 4 & 5. Show a message after function execution.
15. <button bgColor="#14b474" action='Function' functionName='checkIn' successMsg='You have checked in.' size='3' text="Check In"/>
16. <%
17.   }
18.   else
19.   {
    
20. 
    
21. //If the employee has checked-in, lets show the time of check-in
22.    checkedIn = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today];
23.   %>
24. <text bold='true' value='Checked-in at <%=checkedIn.Check_In%>.' size='3' color='#3d566e' type='Text' textAlign='left'> </text>
25. <%
26.   }
27.   %>
28. </pc>
29.   </pr>    
30.  </pc>   
31.  <pc  width='33%' hAlign='center' padding="10px" vAlign='middle'>       
32.      <pr width='100%' height='fill'>     
33.       <pc hAlign="center">
34. <%
    
35. 
    
36. //Find if the employee has already checked out
37.   alreadyOut = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today && Check_Out is today].count(ID);
38.   if(alreadyOut == 0)
39.   {
    
40. 
    
41. //If employee has not checked out, show the button
42.    %>
    
43. 
    
44. //Button's action is linked to the checkOut function created in Step 6 & 7. Show a message after function execution.
45. <button bgColor="#fd3a36" action='Function' functionName='checkOut' successMsg='You have checked out.' size='3' text="Check Out"/>
46. <%
47.   }
48.   else
49.   {
    
50. 
    
51. //Find if the employee has already checked out
52. alreadyCheckedOut = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In is today && Check_Out is today];
    
53. 
    
54. //If the employee has checked-out, lets show the time of check-out
55.    %>
56. <text bold='true' value='Checked-out at <%=alreadyCheckedOut.Check_Out%>.' size='3' color='#3d566e' type='Text' textAlign='left'> </text>
57. <%
58.   }
59.   %>
60. </pc>
61.   </pr>    
62.  </pc>  
63.  <pc  width='33%' hAlign='center' padding="10px" vAlign='middle'>       
64.   <pr width='100%' height='fill'>     
65.    <pc hAlign="center">
    
66. 
    
67. //Show the total hours checked-in
68.     <text bold='true' value='Total Hours : <%=alreadyCheckedOut.Total_Hours%>' size='3' color='#3d566e' type='Text' textAlign='left'> </text>
69.    </pc>
70.   </pr>    
71. </pc>    
72.  </pr>

Fragment c

Umieść powyższe fragmenty odpowiednio, jak pokazano poniżej, aby uzyskać ostateczny kod ZML:

1. <%{
   
2. 
   
3. //Get the logged in user record
4. getUser = Add_Employee[Official_Email == zoho.loginuserid];
5. %>
6. <panel>
7. //Insert Snippet a
8. //Insert Snippet b
9. </panel>
10. <%}%>

Popracujmy teraz nad wpisem świątecznym. Użyjemy fragmentu kodu HTML, aby utworzyć naszą wersję wykazu, aby wyświetlać nadchodzące święta na pulpicie nawigacyjnym.

1. <%{
2.  %>
3. <style>
4. h3 {
5.  padding: 10px;
6. }
7. #zohoreportel
8. {
9.  height : 400px !important;
10. }
11. .holidayTable
12. {
13.  width: 96%;
14.     border-collapse: collapse;
15.     margin: 1% 2%;
16. }
17. 
    
18. .holidayTable td
19. {
20.  padding: 10px;
21.     font-size: 14px;
22.     text-align: center;
23.     border-bottom: 1px solid #f1f1f1;
24. }
25. table.holidayTable > tbody > tr:first-child > td
26. {
27.  font-weight: 600;
28.     font-size: 15px;
29.     background: #ececec;
30. }
31. </style>
32. <div style="height : 450px;overflow:scroll;">
33. <h3>Upcoming Holidays</h3>
34. <%
    
35. 
    
36. //Get the list of holidays until December
37.  holidays = Holidays[Date_field > zoho.currentDate];
38.  if(holidays.count() != 0)
39.  {
40.   %>
41. <table class="holidayTable">
42.  <tr>
43.  <td>Holiday Name</td>
44.  <td>Date</td>
45.  </tr>
46. <%
47.   for each  rec in holidays
48.   {
49.    %>
50. <tr>
51.  <td><%=rec.Holiday_Name%></td>
52.  <td><%=rec.Date_field%></td>
53.  </tr>
54. <%
55.   }
56.   %>
57. </table>
58. <%
59.  }
60.  else
61.  {
62.   %>
63. <div>No holidays Available!</div>
64. <%
65.  }
66.  %>
67. </div>
68. <%
69. }%>

Zobacz jak to działa         

• Related Articles

• Synchronizuj moduł klientów Quickbooks z Zoho Creator

  Wymóg Użyj źródła danych, aby zsynchronizować moduł klientów Quickbooks z aplikacją Zoho Creator. Przypadek użycia   Firma logistyczna prowadzi swoje dane klientów i konta w Quickbooks. Do rezerwacji korzystają z aplikacji do zarządzania logistyką ...

• Okresowo przesyłaj pliki z Zoho Creator do Zoho Workdrive

  Wymóg Przeprowadź integrację między Zoho Creator i Zoho Workdrive i korzystaj z harmonogramów, aby co miesiąc przesyłać pliki z Creator do Workdrive. Przypadek użycia   Aplikacja do śledzenia projektów przechowuje pliki raportów ukończonych projektów ...

• Wyodrębnij zawartość pliku ZIP i wyślij e-mailem rozpakowane pliki

  Wymóg   Użyj Deluge, aby wyodrębnić plik ZIP i wysłać go pocztą e-mail jednym kliknięciem. Przypadek użycia   Aplikacja do zarządzania zasobami ludzkimi zawiera trzy formularze: Dodaj pracownika , Employee Payslips i Download My Payslips . Formularz ...

• Niestandardowe uprawnienia dostępu dla użytkowników aplikacji

  Wymóg Utwórz niestandardowe uprawnienia dla aplikacji i przypisz je odpowiednim użytkownikom. Przypadek użycia W aplikacji do zarządzania zasobami ludzkimi użytkownikom należy przypisać różne poziomy dostępu w zależności od ich przeznaczenia. Na ...

• Kalkulacja czynszu na podstawie wielu wartości wybranych przez klientów na wydarzeniu

  Wymóg Oszacuj czynsz za nieruchomość na podstawie daty i godziny rezerwacji, a także liczby obecności. Przypadek użycia Wynajmowana jest sala bankietowa w hotelu. Oto struktura cenowa hali: Dzień Cena podstawowa (w USD) Liczba gości standardowych (w ...