SharePoint kolonnu formatējuma JSON izmantošana List Filter Online

Ievads

Kolonnu formatējums ir SharePoint Online līdzeklis, kas maina kolonnas attēlojumu ar JSON aprakstu: statuss kā krāsains indikators, skaitlis, iekrāsots atbilstoši vērtībai, persona kā saite, kas sāk e-pasta ziņojumu. Apraksts tiek glabāts pašā kolonnā, un SharePoint to lieto visos saraksta skatos.

List Filter Online var ņemt vērā šos aprakstus. Kad opcija ir ieslēgta, tīmekļa daļa nolasa katras kolonnas, kurai tāds ir, formatējuma JSON un pēc tā veido tabulas šūnas, tāpēc tabula jūsu lapā izskatās kā saraksts, no kura tā nāk. Tīmekļa daļa īsteno biežāk lietoto kolonnu formatējuma valodas apakškopu; šajā rakstā precīzi uzskaitīts, kas tiek atbalstīts, kas ne un kas notiek, kad formāts pārsniedz apakškopu.

Kolonnu formatējuma ieslēgšana

Atveriet lapu rediģēšanas režīmā, atveriet tīmekļa daļas rekvizītu rūti un izvērsiet grupu Izskats. Ieslēdziet opciju Izmantot kolonnu formatējumu no saraksta. Pēc noklusējuma opcija ir izslēgta.

Pats JSON tīmekļa daļā netiek ievadīts. Tas nāk no kolonnas definīcijas avota sarakstā — tās pašas definīcijas, ko SharePoint rediģē, kad sarakstā atverat Kolonnas iestatījumi → Formatēt šo kolonnu un saglabājat formātu. Tīmekļa daļa to ielādē kopā ar citiem kolonnu rekvizītiem, tāpēc tiek lietots arī formāts, kas iestatīts citas vietnes saraksta kolonnai. Formāti ir kolonnu līmenī: katra kolonna, kurai ir formāts, tiek attēlota pēc tā, bet kolonnas bez formāta saglabā kolonnu konfiguratorā izvēlētos attēlošanas formātus (skatiet rakstu KB10258. Kolonnu konfigurēšana List Filter Online: paraksti, formāti un attēlošanas opcijas).

Kad formāts tiek lietots kolonnai, tas pilnībā aizstāj šūnu, tostarp šīs kolonnas opciju Saistīts ar vienumu. Ja vērtībai jāpaliek klikšķināmai, ievietojiet saiti pašā formātā.

Kas tiek atbalstīts

Elementi

Formāts ir elementu koks. Katrs elements ir objekts ar šādām atslēgām:

• elmType — viena no vērtībām div, span, a, img, button vai p. Jebkura cita vērtība, izņemot tālāk uzskaitītās neatbalstītās, tiek attēlota kā div.
• txtContent — elementa teksts: virknes literālis, lauka marķieris vai izteiksme.
• style — elementa CSS rekvizīti (skatiet tālāk).
• attributes — elementa HTML atribūti (skatiet tālāk).
• children — bērnelementu masīvs, kas tiek attēlots secīgi.

Tīmekļa daļai nezināmas atslēgas, piemēram, $schema vai debugMode, tiek ignorētas.

Stili

Objekts style var iestatīt šādus CSS rekvizītus; katra vērtība var būt literālis vai izteiksme:

background, background-color, border, border-top, border-right, border-bottom, border-left, border-color, border-style, border-width, border-radius, box-shadow, color, cursor, direction, display, fill, flex-direction, flex-wrap, align-items, justify-content, font-family, font-size, font-style, font-weight, letter-spacing, line-height, text-align, text-decoration, text-overflow, text-transform, white-space, word-break, overflow, opacity, visibility, padding, padding-top, padding-right, padding-bottom, padding-left, margin, margin-top, margin-right, margin-bottom, margin-left, width, min-width, max-width, height, min-height, max-height.

Rekvizīti ārpus šī saraksta — piemēram, position vai z-index, kas varētu izjaukt tabulas izkārtojumu, — tiek izlaisti bez ziņojuma. Tiek izlaista arī vērtība, kas satur url(, tāpēc fona attēlus caur stiliem ielādēt nevar.

Atribūti

Pārējie atribūti, tostarp role, aria-*, d un data-interception, tiek ignorēti.

Lauku marķieri

Marķieri var stāvēt atsevišķi ("txtContent": "@currentField") vai garākā virknē ("txtContent": "Īpašnieks: [$Owner.title]"). Kolonna ar vairākām vērtībām (vairākas personas, uzmeklēšanas vai termini) tiek attēlota kā ar komatiem atdalīts saraksts; piekļuve rekvizītam, piemēram, [$Owner.email], šādai kolonnai atgriež pirmās vērtības rekvizītu. Personu un uzmeklēšanas vērtības tiek attēlotas ar savu nosaukumu; datumi — kā lokalizēts datums.

Izteiksmes

Izteiksmes var rakstīt kā operatoru kokus — objektus ar operator un operands — vai kā virknes, kas sākas ar =, SharePoint Excel veida sintaksē. Abas formas atbalsta vienu un to pašu operāciju kopu:

• aritmētika: + (arī virkņu savienošana), -, *, /, %;
• salīdzināšana: ==, !=, >, <, >=, <= — datumi tiek salīdzināti pēc laikspiedola;
• loģika: &&, ||, !, nosacījuma operators ? : (kokā — operators ? vai : ar trim operandiem) un funkcija if(nosacījums, jaPatiess, jaAplams);
• pārveidošana: toString(), Number(), Date();
• skaitļi: abs(), floor(), ceiling();
• virknes: toLowerCase(), toUpperCase(), indexOf(), substring(), length().

Virknēs ar = virkņu literāļus raksta vienpēdiņās vai dubultpēdiņās, skaitļus — ar cipariem, loģiskās vērtības — kā true un false; iekavas grupē apakšizteiksmes, un lauku marķieri tiek lietoti tieši: =if([$Priority] == 'High', '#a4262c', '#323130').

Kas netiek atbalstīts

Tīmekļa daļa neīsteno šādas kolonnu formatējuma valodas daļas:

• forEach — elementa atkārtošana katrai vairāku vērtību kolonnas vērtībai;
• customRowAction — pogas, kas sāk plūsmu, atver paneli vai iestata lauka vērtību;
• elmType: "filepreview" — dokumentu priekšskatījumi;
• elmType: "svg" un path — iegultā vektorgrafika;
• marķieri @rowIndex, @window, @thumbnail, @currentWeb un citi iepriekš neuzskaitīti marķieri;
• iepriekš neuzskaitītie operatori un funkcijas, piemēram, toLocaleString(), toLocaleDateString(), startsWith(), padStart(), replace(), split(), join(), getDate(), addDays(), getUserImage(), cos() un sin().

Formātu, kas izmanto forEach, customRowAction, filepreview, svg, nezināmu operatoru vai funkciju, nezināmu @ marķieri vai satur sintakses kļūdu = izteiksmē, attēlot nevar. Šādā gadījumā tīmekļa daļa atmet formātu un attēlo kolonnu ar tās noklusējuma attēlojumu — kolonnu konfiguratorā izvēlēto formātu — tieši tāpat, kā ja opcija šai kolonnai būtu izslēgta. Pārējās kolonnas tas neskar. Nezināmi atribūti un stila rekvizīti turpretī tiek vienkārši izlaisti, un pārējais formāts tiek lietots.

Piemēri

Šie formāti nepārsniedz atbalstīto apakškopu.

Statusa indikators. Izvēles vērtība tiek rādīta uz noapaļota fona, kura krāsa atkarīga no vērtības:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "display": "inline-block",
    "padding": "2px 10px",
    "border-radius": "12px",
    "font-weight": "600",
    "color": "#ffffff",
    "background-color": "=if(@currentField == 'Approved', '#107c10', if(@currentField == 'Rejected', '#a4262c', '#8a8886'))"
  }
}

Skaitlis, iekrāsots pēc vērtības, rakstīts kā operatoru koks. Summas virs 1000 tiek rādītas sarkanā treknrakstā:

{
  "elmType": "span",
  "txtContent": "@currentField",
  "style": {
    "color": {
      "operator": "?",
      "operands": [
        { "operator": ">", "operands": [ { "operator": "Number()", "operands": [ "@currentField" ] }, 1000 ] },
        "#a4262c",
        "#107c10"
      ]
    },
    "font-weight": "=if(Number(@currentField) > 1000, '700', '400')"
  }
}

Saite ar ikonu. Persona kolonnā «Piešķirts» tiek attēlota kā e-pasta saite ar aploksnes ikonu; formāts tiek iestatīts pašai kolonnai «Piešķirts» un izmanto personas vērtības rekvizītus:

{
  "elmType": "a",
  "attributes": {
    "href": "='mailto:' + @currentField.email",
    "title": "=@currentField.title",
    "iconName": "Mail",
    "target": "_blank"
  },
  "txtContent": "@currentField.title",
  "style": {
    "color": "#0078d4",
    "text-decoration": "none"
  }
}

Veiktspēja

Kolonnas JSON tiek parsēts vienu reizi — kad pirmo reizi attēlota šīs kolonnas šūna, — un parsētais koks tiek izmantots atkārtoti visām pārējām kolonnas šūnām un visām turpmākajām vienumu lapām. Katrai šūnai tiek izvērtēti tikai marķieri un izteiksmes. Tāpēc opcijas ieslēgšana gandrīz nepagarina laiku, kas nepieciešams tabulas parādīšanai, pat garās lapās.

Saistītie raksti