U mom nedavnom YouTube videu o Microsoft Lists vs Excelkomentirao je gledatelj i pitao mogu li Microsoftovi popisi prikazati traku vremenske trake, sličnu Ganttovom grafikonu, na popisu. Odgovor je da! S nekim formatiranjem prikaza pomoću JSON-a, to je moguće. Ako niste upoznati s JSON-om, ne brinite—provest ću vas kroz cijeli proces, od početka do kraja, u ovom postu ili moj video tutorial.
Sadržaj objave
Kako stvoriti prikaz Ganttograma popisa
Da biste izradili prikaz gantograma/vremenske trake, prvo morate pripremiti svoj popis da odgovara JSON-u (ili izmijeniti JSON da odgovara vašem popisu). Provest ću vas kroz postavljanje popisa kao i kroz implementaciju. Prvo, pripremimo vaš popis. Možete pratiti blog post ili pogledajte video demonstraciju.
Prvi korak: postavite stupce popisa i sortirajte prikaz popisa
Vaš popis mora imati svaki od sljedećih stupaca konfiguriranih na sljedeći način. Stvorite svaki od njih, pazeći da ga imenujete točno kako je prikazano (bez razmaka).
| Tip | Interni naziv | Potreban | Vrijednosti |
|---|---|---|---|
| Jedan redak teksta | Titula | Da | |
| Datum | ProjectStart | Da | |
| Datum | ProjectDue | Da | |
| Datum | TaskStart | Da | |
| Datum | TaskDue | Da | |
| Broj (format kao postotak) | Napredak | Da | |
| Izbor | TaskType | Ne | Zadatak, Prekretnica |
| Ljudi (jedan odabir) | DodijeljenoKorisniku | Da | |
| Više redaka teksta (bez formata) | Opis zadatka | Da |
Savjet
Već imate popis s već postojećim stupcima koje želite koristiti? Možete modificirati JSON skriptu kako biste pronašli i zamijenili nazive stupaca primjera svojima. Važno je koristiti unutarnje naziv polja. To možete pronaći tako da odete u Postavke popisa, odaberete naziv stupca i provjerite URL preglednika za ono što slijedi Polje= na kraju.
Zatim sortirajte prikaz popisa prema TaskStartuzlazno (od starijeg prema novijem). U mom video demonstracijaidem korak dalje i radim sortiranje na više razina (make TaskTypeuzlazno prema sekundarnom sortiranju) kako biste bili sigurni da se prekretnice s istim datumom početka kao i zadaci pojavljuju prvi, a zadaci slijede.
Ako je vaš popis prazan, možda ćete htjeti dodati neke uzorke podataka kako biste osigurali da oblikovanje prikaza radi kako se očekuje nakon što se primijeni. Zatim, primijenimo JSON na naš prikaz popisa.
Drugi korak: primijenite JSON na oblikovanje prikaza
Da biste JSON primijenili na prikaz popisa, slijedite ove korake:
- Zatim odaberite padajuću strelicu naziva prikaza popisa Formatiraj trenutni prikaz.
- Odaberite Napredni način rada.
- Zamijenite sve u JSON okviru s osigurao JSON.
- Odaberite Uštedjeti.
Podrška više projekata
Ako vam je potreban Ganttov pogled kako biste korisnicima omogućili prebacivanje između više projekata, pogledajte moj video demonstracija gdje dodajem još jedan stupac teksta (ili izbora) za ProjectName. Ganttov pogled se zatim može grupirati prema ProjectName tako da korisnici mogu dublje i gore kroz različite projekte, svi dijeleći istu Ganttovu karticu prikaza umjesto stvaranja više pogleda po projektu. Imajte na umu da svaki jedinstveni projekt mora imati isto ProjectStart i ProjectDue datume u svakom zadatku i stavku prekretnice koja se odnosi na taj projekt.
Prikaži formatiranje JSON
zahvaljujući Geert de Kooter za dijeljenje Primjer PnP formatiranja. Ako ne možete pristupiti poveznici, kôd (od 22. rujna 2024.) nalazi se u nastavku. Za više pojedinosti ili ažurirane verzije svakako provjerite službena stranica na GitHubu.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"style":
"height": "=if(@rowIndex == 0, '88px', '52px')",
"display": "block",
"width": "100%",
"position": "sticky"
,
"attributes":
"class": "ms-bgColor-neutralLighter--hover"
,
"children": [
"elmType": "div",
"attributes":
"class": "ms-bgColor-themePrimary"
,
"style":
"width": "100%",
"display": "=if(@rowIndex == 0, 'flex', 'none')",
"height": "36px",
"padding": "0",
"font-weight": "bold",
"border-radius": "6px 6px 0 0"
,
"children": [
"elmType": "div",
"txtContent": "Task",
"style":
"width": "220px",
"text-align": "left",
"padding-left": "0.4em",
"box-sizing": "border-box"
,
"attributes":
"class": "ms-fontSize-16 ms-fontColor-white"
,
"elmType": "div",
"style":
"flex-grow": "1",
"height": "100%",
"position": "relative"
,
"children": [
"elmType": "div",
"txtContent": "=toLocaleDateString([$ProjectStart])",
"style":
"position": "absolute",
"padding": "14px 4px 0 4px",
"height": "22px",
"border-radius": "6px 6px 0 0"
,
"attributes":
"title": "='Project Start: ' + toLocaleDateString([$ProjectStart])",
"class": "ms-bgColor-themeDarker ms-fontSize-14 ms-fontColor-white"
,
"elmType": "div",
"txtContent": "=toLocaleDateString([$ProjectDue])",
"style":
"position": "absolute",
"right": "0",
"padding": "14px 4px 0 4px",
"height": "22px",
"border-radius": "6px 6px 0 0"
,
"attributes":
"title": "='Project Finish: ' + toLocaleDateString([$ProjectDue])",
"class": "ms-bgColor-themeDarker ms-fontSize-14 ms-fontColor-white"
,
"elmType": "span",
"txtContent": "=toLocaleDateString( @now)",
"style":
"position": "relative",
"width": "90px",
"z-index": "100",
"display": "=if([$ProjectDue] < @now , 'none', 'block')",
"left": "=floor( (Number(@now)-Number([$ProjectStart])) / (Number([$ProjectDue])-Number([$ProjectStart])) * 100 ) + '%'",
"background-color": "#e1dfdd",
"text-align": "center",
"padding": "0 3px",
"margin": "0 0 0 3px"
,
"elmType": "span",
"attributes":
"class": "ms-fontColor-gray40"
,
"style":
"position": "relative",
"display": "=if( [$ProjectDue] < @now , 'none', 'block')",
"top": "-1.3em",
"z-index": "1",
"border-left": "5px solid",
"height": "800px",
"width": "0.1em",
"left": "= (Number(@now)-Number([$ProjectStart])) / (Number([$ProjectDue])-Number([$ProjectStart])) * 100 + '%' "
]
]
,
{
"elmType": "div",
"style":
"width": "100%",
"display": "flex"
,
"children": [
"elmType": "div",
"style":
"width": "220px",
"display": "flex",
"flex-wrap": "wrap"
,
"attributes":
"class": ""
,
"children": [
"elmType": "span",
"style":
"width": "24px",
"padding": "6px 0",
"text-align": "center",
"cursor": "pointer"
,
"attributes":
"iconName": "=if([$Progress] >= 1, 'CompletedSolid', if([$Progress] > 0 , 'CortanaLogoReadyOuter', 'CircleRing'))",
"title": "='Progress: ' + Number([$Progress] * 100) + '%'",
"class": "= 'ms-fontSize-14 ms-fontColor-' + if([$Progress] >= 1, 'green', 'neutralSecondaryAlt')"
,
"customRowAction":
"action": "setValue",
"actionInput": [$TaskType] == '', 25 , 100) , if([$Progress] == 0.25 , 50, if([$Progress] == 0.50, 75, if([$Progress] == 0.75, 100, 0))))"
,
"elmType": "button",
"txtContent": "[$Title]",
"customRowAction":
"action": "editProps"
,
"style":
"width": "196px",
"height": "1.6em",
"padding": "0.3em 0 0 0",
"border": "none",
"background-color": "transparent",
"cursor": "pointer",
"text-decoration": "none",
"text-align": "left",
"outline": "none",
"display": "inline-block",
"overflow": "hidden",
"text-overflow": "ellipsis",
"white-space": "nowrap"
,
"attributes":
"title": "[$Title]",
"class": "ms-fontSize-14 ms-fontWeight-semibold ms-fontColor-gray140 ms-fontColor-black--hover"
,
"elmType": "span",
"style":
"width": "24px",
"padding": "1px 0 0 0",
"text-align": "center"
,
"attributes": ([$TaskType] == 'Milestone' && [$TaskStart]< @now && [$Progress] < 1 ) , 'EventDateMissed12', '')",
"title": "This task is running late!",
"class": "='ms-fontSize-14 ms-fontColor-' + if([$TaskDue]< @now && [$Progress] < 1, 'sharedRed20', 'themePrimary')"
,
"elmType": "div",
"txtContent": "=toLocaleDateString([$TaskStart])",
"style":
"width": "96px",
"padding": "0.1em 0",
"text-align": " center",
"heigth": "1.4em",
"border-radius": "12px",
"margin": "0 2px 0 0 "
,
"attributes":
"class": "ms-fontSize-12 ms-bgColor-neutralLight"
,
"elmType": "div",
"txtContent": "=toLocaleDateString([$TaskDue])",
"style":
"width": "96px",
"padding": "0.1em 0",
"text-align": " center",
"border-radius": "12px",
"margin": "0 2px 0 0 "
,
"attributes":
"class": "ms-fontSize-12 ms-bgColor-neutralLight"
]
,
{
"elmType": "div",
"style":
"flex-grow": "1",
"position": "relative",
"height": "3.3em",
"padding": "0.3em 0 0 0"
,
"attributes":
"class": ""
,
"children": [
"elmType": "div",
"txtContent": "",
"style": ,
"attributes":
"class": "",
"title": ""
,
"elmType": "div",
"style":
"position": "absolute",
"box-sizing": "border-box",
"display": "=if(( [$TaskType] == 'Task' ,
"attributes":
"class": "sp-field-bold",
"title": "=[$Title] + ' - ' + toLocaleDateString([$TaskStart]) + ' - ' + toLocaleDateString([$TaskDue])"
,
{
"elmType": "div",
"txtContent": "",
"style":
"position": "absolute",
"box-sizing": "border-box",
"border-radius": "6px",
"z-index": "50",
"top": "0.6em",
"height": "2.4em",
"overflow": "hidden",
"text-overflow": "ellipsis",
"border": "=if([$TaskDue]< @now && [$Progress] < 1 && ([$TaskType] == 'Task' ,
"attributes":
"class": "",
"title": ""
,
"customCardProps": {
"openOnEvent": "hover",
"directionalHint": "bottomCenter",
"isBeakVisible": true,
"beakStyle":
"backgroundColor": "white"
,
"formatter": {
"elmType": "div",
"style":
"max-height": "256px",
"width": "282px",
"display": "flex",
"flex-wrap": "wrap",
"align-items": "flex-start"
,
"attributes":
"class": "ms-ContextualMenu-list is-open list-436"
,
"children": [
"elmType": "div",
"txtContent": "[$Title]",
"style":
"width": "250px",
"height": "40px",
"padding": "4px 4px 0 4px",
"overflow": "hidden",
"text-overflow": "ellipsis"
,
"attributes":
"class": "ms-fontSize-14 ms-bgColor-themeLight ms-fontWeight-semibold ms-fontColor-gray160"
,
"elmType": "div",
"style":
"width": "12",
"flex-grow": "1",
"height": "34px",
"padding": "10px 0 0 0 ",
"text-align": "center",
"cursor": "pointer"
,
"attributes":
"iconName": "Edit",
"class": "ms-fontSize-14 ms-bgColor-themeLight ms-fontColor-gray160"
,
"customRowAction":
"action": "editProps"
,
"elmType": "div",
"style":
"width": "100%",
"display": "flex",
"flex-wrap": "wrap",
"align-items": "flex-start",
"margin": "2px 0"
,
"children": [
"elmType": "div",
"style":
"width": "24px",
"padding": "6px 0",
"text-align": " center",
"heigth": "1.4em"
,
"attributes":
"iconName": "Timeline"
,
"elmType": "div",
"txtContent": "0%",
"style":
"padding": "2px 6px",
"text-align": " center",
"border-radius": "14px",
"margin": "2px 2px 0 0 ",
"cursor": "pointer",
"heigth": "1.4em"
,
"attributes":
"class": "='ms-fontSize-14 ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$Progress] == 0, 'themeTertiary', 'neutralLight')"
,
"customRowAction":
"action": "setValue",
"actionInput":
"Progress": "0"
,
"elmType": "div",
"txtContent": "25%",
"style":
"padding": "2px 6px",
"text-align": " center",
"border-radius": "14px",
"margin": "2px 2px 0 0 ",
"cursor": "pointer",
"heigth": "1.4em"
,
"attributes":
"class": "='ms-fontSize-14 ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$Progress] == 0.25, 'themeTertiary', 'neutralLight')"
,
"customRowAction":
"action": "setValue",
"actionInput":
"Progress": "25"
,
"elmType": "div",
"txtContent": "50%",
"style":
"padding": "2px 6px",
"text-align": " center",
"border-radius": "14px",
"margin": "2px 2px 0 0 ",
"cursor": "pointer",
"heigth": "1.4em"
,
"attributes":
"class": "='ms-fontSize-14 ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$Progress] == 0.5, 'themeTertiary', 'neutralLight')"
,
"customRowAction":
"action": "setValue",
"actionInput":
"Progress": "50"
,
"elmType": "div",
"txtContent": "75%",
"style":
"padding": "2px 6px",
"text-align": " center",
"border-radius": "14px",
"margin": "2px 2px 0 0 ",
"cursor": "pointer",
"heigth": "1.4em"
,
"attributes":
"class": "='ms-fontSize-14 ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$Progress] == 0.75, 'themeTertiary', 'neutralLight')"
,
"customRowAction":
"action": "setValue",
"actionInput":
"Progress": "75"
,
"elmType": "div",
"txtContent": "100%",
"style":
"padding": "2px 6px",
"text-align": " center",
"border-radius": "14px",
"margin": "2px 2px 0 0 ",
"cursor": "pointer",
"heigth": "1.4em"
,
"attributes":
"class": "='ms-fontSize-14 ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$Progress] == 1, 'themeTertiary', 'neutralLight')"
,
"customRowAction":
"action": "setValue",
"actionInput":
"Progress": "100"
]
,
"elmType": "div",
"style": ([$TaskType] == 'Milestone' && [$TaskStart]< @now && [$Progress] < 1 ) , 'block', 'none')",
"padding": "6px 0 7px 0",
"text-align": " center",
"heigth": "1.4em",
"margin": "2px 0"
,
"attributes":
"iconName": "EventDateMissed12",
"class": "sp-field-severity--blocked30 ms-fontSize-14 ms-fontColor-sharedRed20"
,
"elmType": "div",
"txtContent": "This task is running late!",
"style": ([$TaskType] == 'Milestone' && [$TaskStart]< @now && [$Progress] < 1 ) , 'block', 'none')",
"padding": "4px 0 4px 4px",
"text-align": " Left",
"heigth": "1.4em",
"margin": "2px 0"
,
"attributes":
"class": "sp-field-severity--blocked30 ms-fontSize-14 ms-fontColor-sharedRed20"
,
"elmType": "div",
"style":
"width": "24px",
"padding": "6px 0",
"text-align": " center",
"heigth": "1.4em"
,
"attributes":
"iconName": "Calendar"
,
"elmType": "div",
"txtContent": "=toLocaleDateString([$TaskStart])",
"style":
"width": "127px",
"padding": "2px 0",
"text-align": " center",
"border-radius": "14px",
"margin": "2px 2px 0 0 ",
"height": "1.4em"
,
"attributes":
"class": "ms-fontSize-14 ms-bgColor-neutralLight"
,
"elmType": "div",
"txtContent": "=toLocaleDateString([$TaskDue])",
"style":
"width": "127px",
"padding": "2px 0",
"text-align": " center",
"border-radius": "14px",
"margin": "2px 2px 0 0 ",
"height": "1.4em"
,
"attributes":
"class": "ms-fontSize-14 ms-bgColor-neutralLight"
,
"elmType": "div",
"style":
"width": "24px",
"padding": "6px 0",
"text-align": " center",
"heigth": "1.4em"
,
"attributes":
"iconName": "Contact",
"title": "='Assigned to : ' + [$AssignedToUser.title]"
,
"elmType": "div",
"txtContent": "[$AssignedToUser.title]",
"style":
"width": "254px",
"padding": "4px 0 4px 4px"
,
"defaultHoverField": "[$AssignedToUser]"
,
"elmType": "div",
"txtContent": "[$TaskDescription]",
"style":
"font-style": "italic",
"width": "254px",
"padding": "4px 0 4px 4px"
]
}
}
},
"elmType": "div",
"txtContent": "",
"style":
"position": "relative",
"box-sizing": "border-box",
"display": "=if([$TaskType] == 'Milestone', 'flex', 'none')",
"z-index": "10",
"top": "0.3em",
"height": "3em",
"left": "= (Number([$TaskStart])-Number([$ProjectStart])) / (Number([$ProjectDue])-Number([$ProjectStart])) * 100 + '%'",
"margin-left": "-14px",
"width": "28px"
,
"attributes":
"iconName": "=if([$TaskStart]< @now && [$Progress] < 1, 'EventDateMissed12', 'EventDate'",
"title": "=[$Title] + ' - ' + toLocaleDateString([$TaskStart]) ",
"class": "='ms-fontSize-24 ' + if([$TaskStart]< @now && [$Progress] < 1, 'ms-fontColor-sharedRed20', 'ms-fontColor-themePrimary') "
,
"elmType": "div",
"txtContent": "=getDate([$TaskStart]) + '-' + if(getMonth([$TaskStart])==0,'Jan',if(getMonth([$TaskStart])==1,'Feb',if(getMonth([$TaskStart])==2,'Mar',if(getMonth([$TaskStart])==3,'Apr',if(getMonth([$TaskStart])==4,'May',if(getMonth([$TaskStart])==5,'Jun',if(getMonth([$TaskStart])==6,'Jul',if(getMonth([$TaskStart])==7,'Aug',if(getMonth([$TaskStart])==8,'Sep',if(getMonth([$TaskStart])==9,'Oct',if(getMonth([$TaskStart])==10,'Nov',if(getMonth([$TaskStart])==11,'Dec',''))))))))))))",
"style":
"position": "absolute",
"box-sizing": "border-box",
"display": "=if([$TaskType] == 'Milestone' , 'flex', 'none')",
"z-index": "3",
"top": "10px",
"height": "24px",
"margin-left": "-60px",
"left": "= (Number([$TaskStart])-Number([$ProjectStart])) / (Number([$ProjectDue])-Number([$ProjectStart])) * 100 + '%'",
"width": "60px",
"text-align": "right"
,
"attributes":
"class": "sp-field-bold ms-fontSize-14"
,
"elmType": "div",
"txtContent": "=(Number[$Progress]) * 100 + '%'",
"style": [$TaskType] == '' , 'flex', 'none')",
"z-index": "3",
"top": "10px",
"height": "24px",
"margin-left": "=if((Number([$TaskDue])-Number([$ProjectStart])) / (Number([$ProjectDue])-Number([$ProjectStart])) <= 0.9 , '10px' , '-40px')",
"left": "=if((Number([$TaskDue])-Number([$ProjectStart])) / (Number([$ProjectDue])-Number([$ProjectStart])) <= 0.9 , (Number([$TaskDue])-Number([$ProjectStart])) / (Number([$ProjectDue])-Number([$ProjectStart])) * 100 + '%' , (Number([$TaskStart])-Number([$ProjectStart])) / (Number([$ProjectDue])-Number([$ProjectStart])) * 100 + '%' ) ",
"width": "40px"
,
"attributes":
"class": "sp-field-bold ms-fontSize-14"
]
}
]
}
]
}
}