Modyfikacje wizualne tabeli specjalistów


Po ostatnim wpisie mamy gotową tabelę dla wszystkich członków zespołu – popracujmy nad jej wizualną formą, ponieważ w przyszłości będziemy ją wielokrotnie wykorzystywać i odwoływać się do niej w wielu miejscach całego dokumentu: 

  1. Widok KART przenosimy do nowej zakładki “Nasz zespół”
    image.png
  2. W tabeli głównej znajdującej się w dokumencie “dane personalne” dodamy dla każdego informacje kontaktowe – tworzymy pod to dwie nowe kolumny: email + telefon: 
    image.png
  3. Uzupełniłem informacje kontaktowe, ukryłem kolumnę FULL NAME (nie jest tutaj potrzebna) i dodałem kolumnę na zdjęcie edytując jej wyświetlanie w formie jak poniżej:
    image.png
    (zmieniłem też nazwę tabeli dopisując do niej “_main” – w przyszłość, każda główna tabela, na podstawie której będą powstawać nowe alternatywne widoki tej tabeli, będzie miała taki dopisek.
  4. Teraz zmodyfikujemy nasze karty zespołowe:
  5. Po wejściu w ustawienia kart ukryjemy zbędne w tym miejscu infomracje oraz zmienimy kolejność i layout dla wyświetlanych informacji.
    Po szybkich modyfikacjach uzyskujemy wynik jak poniżej: 
    image.png
  6. Następnie dodamy formatowanie warunkowe dla odznaczenia karty kolorem danego działu. W coda.io można ustalić kolor na całą kartę, ale na teraz ustale górny pasek. Dodatkowo mogę ustawić sortowanie według działu, dla dla naszego przypadku przemieszczę karty manualnie. 
    Ważne by formatowanie, które chcemy aby było globalne, nadawać na tabelę główną (tą z dopiskiem “_main”) – takie formatowanie będziemy mogli wykorzystać w każdym utworzonym widoku tej tabeli. 
    image.png
  7. Celowo formatowanie nadałem tylko na jedną kolumnę “FULL NAME”, która w widoku tabeli będzie ukryta, aby dla alternatywnych widokow uzyskać wynik jak poniżej: 
    image.png
  8. Ustalimy jeszcze jake informacje mają być dostępne z poziomu karty inforrmacji wyświetlanej po kliknięciu w daną osobę: 
    image.png
  9. Powyższe ustawienie daje efakt jak poniżej: 
    image.png

To kończy temat wizualnych aspektów karty zespołowej 🙂