Modernia SharePointia räätälöidään SharePoint Frameworkilla (SPFx).
Entä jos ei huvita? Tai ei osaa? Tai ei ole aikaa? Tai joku muu vapaavalintainen tekosyy.
Moderneille SharePoint sivuille tuli juuri oma web-osa PowerAppsin upottamiseksi sivulle.
Tämä on erinomaista. Nyt on helppoa upottaa vaikka IT:n sivulle uuden tietokoneen tilauslomake (tietenkin PowerAppsilla toteutettuna). Ollaan tänään kuitenkin hieman luovempia. Mitä jos toteuttaisimme pieniä SharePoint räätälöintejä PowerAppsilla? Niin sekopäinen idea että tietenkin sitä kokeillaan.
Esimerkki – viritetty uutissyötenäkymä
RSS-syötteen esittäminen SharePoint sivulla on tyypillinen ja aivan validi tarve. Mutta olenko ainoa jonka mielestä modernin tiimisivuston RSS-syöte web-osa on aivan hirveä?
Ja vaikkei olisikaan, ei sitä ole tarjolla viestintäsivustolla.
Hylätään siis se.
RSS-syötteen tallennus Flow:n avulla
Seuraava idea on imuroida RSS-syötteet Flow:n avulla SharePoint listalle. Tällöin Flow näyttää tältä.
RSS-syötteen uutiset sisältävä lista taas vastaavasti tältä.
Nyt syötteen uutisia voi näyttää eri puolilla sivustoa highlighted content -web-osan avulla. Ja kun ne ovat tallennettuna listalle, ne löytyvät myös haulla.
Myönnetään. Näyttäähän se karulta. Saisiko näkymästä tiiviimmän jos siinä näytettäisiin sisällöstä ainoastaan otsikko. Riviä klikkaamalla tulisi näkyviin koko kuvaus. Linkkikin voisi olla kivemmin muotoiltu.
Tyypillisesti tässä kohtaa alkaisi css:n hierominen ja/tai SPFx kehitys. Mutta me käynnistämme PowerAppsin.
Tyhjän PowerAppsin luominen
Tehdään tyhjä sovellus, joka käyttää tablet layouttia.
Lisätään tyhjä gallery-elementti.
Seurataan Data-osion ohjeita ja liitetään galleria SharePoint listaan, jolle RSS-syötteen uutiset on tallennettu.
Vaihdetaan layout sopivaksi ja asetetaan ainoan kentän arvoksi Title. Ratkaisun runko on valmis.
Haluamme ”web-osastamme” leveän, joten muutetaan PowerAppsin leveydeksi 2000px.
Uutislistan viilaaminen
Lista näyttää vielä aika karulta. Seuraavaksi
- säädetään gallerian kokoa
- pienenetään fontteja
- lisätään uutisen lähde ja julkaisuaika -tiedot riveille
Tämä alkaa hahmottua.
Haluamme jokaiselle riville linkin, josta avautuu alkuperäinen uutinen. Tämä onnistuu lisäämällä riville HTMLText -kontrollin.
Rivin kuvauskentän näyttäminen ja piilottaminen
Nyt kustakin uutisesta näytetään ainoastaan otsikko. Uutisen pidempi kuvaus on piilossa ja sen pitäisi ilmestyä näkyviin kolmea pistettä painamalla. Toteutetaan tämä seuraavalla tavalla.
- lisätään riville kuvauskenttä (description)
- sijoitetaan kuvauskenttä aivan rivin alareunaan
- asetetaan kentän
- Auto height -arvoksi true
- taustaväriksi valkoinen
- reunat mustksi
- Visible arvoksi ThisItem.IsSelected (näytetään ainoastaan valitulla rivillä)
- lisätään riville kolmen pisteen symboli ja sen OnSelect:in arvoksi Select(Parent)
Ihan ok, mutta nyt on aina jonkun rivin kuvauskenttä esillä. Lisätään riville ruksi, josta kuvauskentän voi halutessaan sulkea.
- lisätään riville sopiva ruksin kuva
- ruksin OnSelect arvoksi asetataan Set(hidedescription, true)
- muutetaan kuvauskentän Visible arvoksi ThisItem.IsSelected && !hidedescription
- muutetaan kolmen pisteen OnSelect arvoksi Select(Parent); Set(hidedescription, false)
Pelataan siis hidedescription -muuttujalla, jonka avulla päätellään onko kuvauskenttä näkyvillä vai ei.
Rivien lajittelu sarakkeiden mukaan
Lisätään lopuksi mahdollisuus lajitella uutiset otsikon, lähteen tai julkaisuajan mukaan. Lisätään ensin sarakkeille otsikot ja lajittelusymbolit sekä asetataan värillinen laaatikko niiden taustalle.
Lisätään kunkin järjestyspainikkeen OnSelect arvoksi seuraavat:
- asetataan SortPriority muuttujan arvoksi kyseisen sarakkeen nimi
- asetetaan SortAscending muuttujan arvoksi Ascending jos se oli Descending (ja toisinpäin)
- asetataan hideDescription muuttujan arvoksi true (piilotetan kuvauskenttä)
Määrittelemiämme muuttujia hyväksikäyttäen voimme asettaa gallerian rivien järjestyksen halutunlaiseksi.
Huomaa että sininen valo syttyy kertomaan meille että käyttämämme tietolähde (SharePoint) ei tue delegointia SortByColumns -toiminnon kanssa. Mikäli Delegointi ei ole tuttu käsite, suosittelen lukemaan kirjoittamani jutun aiheesta.
PowerAppsin lisääminen SharePoint sivustolle
Tallennetaan ja julkaistaan PowerApps. SharePointiin upottamista varten tarvitset joko PowerAppsin web-linkin tai App ID:n
Siirrytään halutulle sivulle ja lisätään sille PowerApps web-osa.
Lisätään poimimamme App ID ja julkaistaan sivu.
Valmista!
Yhteenveto
Oliko tässä mitään järkeä? Ei.
Oliko taas hauskaa? Oli.
PowerApps pomppaa poikkeavan ulkoasunsa osalta silmille SharePoint-sivulta. Sitä ei ole mitään järkeä (tai toivoa) lähteä viilaamaan niin että se istuisi kaikissa tilanteissa saumattomasti kokonaisuuteen.
PowerApps latautuu aina hitaammin kuin muu sivu. Korvaamalla SharePointin vakio listanäkymä PowerAppsilla, asetimme samalla rivien maksimimääräksi 500. Mikä ei sekään ole välttämttä erikoisen hyvä vaihtokauppa.
Mutta opimmepa tekemään PowerAppsilla listan jota voi järjestää eri sarakkeiden mukaan.
Timo Pertilä 