Mukautettujen kuvakkeiden näyttäminen luettelonäkymien arvojen rinnalla

Power Apps -ympäristön järjestelmänvalvojat ja mukauttajat voivat lisätä kuvia näkymään yhteyttä ja määrittää kuvan valinnassa käytettävän logiikan sarakkeen arvon perusteella JavaScriptin avulla. Ominaisuudella voi mukauttaa luettelonäkymiä, joissa kuvakkeet näkyvät teksti- tai numeroarvojen rinnalla.

Tässä esimerkissä näytetään mukautetut kuvakkeet myyntimahdollisuus-taulukon näkymässä, joka on käytettävissä tietyissä sovelluksissa, kuten Dynamics 365 Salesissa. Voit näyttä mukautettuja kuvakkeita näkymissä, joissa on muita vakiotaulukkoja, kuten asiakas- tai yhteyshenkilötaulukko, sekä mukautetuissa taulukoissa.

Luettelonäkymien mukautetut kuvakkeet voidaan näyttää mallipohjaisissa sovelluksissa, mobiilisovelluksessa ja App for Outlookissa.

Mukautetun grafiikan ja JavaScriptin lisääminen WWW-resursseina

1. Luo mukauttamisessa tarvittavat uudet grafiikkatiedostot. Suosittelemme kuvakkeen kooksi 16 x 16 kuvapistettä (suuremmat kuvat skaalataan pienemmiksi).

2. Kirjoita vähintään yksi JavaScript-funktio, joka määrittää eri arvoille näytettävät kuvakkeet (yleensä tarvitaan yksi funktio jokaiselle mukautettavalle sarakkeelle). Jokaisen funktion on hyväksyttävä rivin tieto-objekti ja kielen (LCID) koodi syötteenä ja palautettava taulukko, joka sisältää kuvan nimen ja työkaluvihjeen tekstin. Esimerkki on jäljempänä tässä artikkelissa kohdassa JavaScript-mallifunktio.

3. Kirjaudu ympäristöön ja avaa ratkaisunhallinta.

4. Ratkaisu-välilehti avautuu. Valitse Komponentit>Verkkoresurssit.

5. Lataa nyt mukautetut grafiikkasi yksi kerrallaan verkkoresursseina. Valitse työkalurivin Uusi-painike ja luo uusi WWW-resurssi. Näyttöön avautuu resurssin luomisessa auttava ponnahdusikkuna. Toimi seuraavasti:

   1. Anna uudelle resurssille kuvaava Nimi. Se on nimi, jolla jokaiseen grafiikkaan viitataan JavaScript-koodissa.

   2. Määritä Tyyppi grafiikkamuotoon, jota olet käyttänyt grafiikkatiedoston tallentamiseen (PNG, JPEG tai GIF).

   3. Valitse tiedosto -kohdan valitseminen avaa tiedostojen selainikkunan. Käytä sitä grafiikkatiedoston etsimiseen ja valitsemiseen.

   4. Lisää halutessasi näyttönimi ja/tai kuvaus.

   5. Valitse Tallenna ja sulje Verkkoresurssi-ikkuna.

6. Toista edellinen vaihe jokaisen grafiikkatiedoston kohdalla.

7. Lisää nyt oma JavaScriptisi viimeisenä verkkoresurssina. Valitse työkalurivin Uusi-painike ja luo uusi WWW-resurssi. Näyttöön avautuu toinen resurssin luomisessa auttava ponnahdusikkuna. Toimi seuraavasti:

   1. Anna uudelle resurssille kuvaava Nimi.

   2. Määritä tyypiksiSkripti (JScript).

   3. Valitse Tekstieditori (Tyyppi-asetuksen vieressä) avataksesi tekstieditori-ikkunan. Liitä JavaScript-koodi tähän ja tallenna se valitsemalla OK.

   4. Lisää halutessasi näyttönimi ja/tai kuvaus.

   5. Valitse Tallenna ja sulje verkkoresurssi-ikkuna.

8. Kun ratkaisuvälilehti on edelleen auki, laajenna puurakenne Komponentit>Taulukot ja etsi mukautettava taulukko.

9. Laajenna taulukko ja valitse sen Näkymät -kuvake.

10. Näkyviin tulee valitun taulukon näkymäluettelo. Valitse näkymä luettelosta. Avaa sitten työkalurivin Lisää toimintoja -avattava valikko ja valitse Muokkaa.

11. Näyttöön avautuu uusi ponnahdusikkuna, joka sisältää valitun näkymän ohjausobjektit muokkaamista varten. Se näyttää jokaisen sarakkeen, joka on osa näkymää. Valitse kohdesarake ja valitse sitten Muuta ominaisuuksia -painike Yleiset tehtävät -ruudussa. Muuta sarakkeen ominaisuudet -valintaikkuna avautuu. Tee siinä seuraavat asetukset:

    • Verkkoresurssi: Määritä sen luomasi verkkoresurssin nimi, joka sisältää JavaScript-funktiot (valitse se luettelosta selainpainikkeen avulla).

    • Funktion nimi: Kirjoita sen kirjoittamasi funktion nimi, joka muokkaa valittua saraketta ja näkymää.

12. Valitse OK ja sulje Muuta sarakkeen ominaisuudet -valintaikkuna.

13. Valitse Tallenna ja sulje tallentaaksesi näkymäsi.

14. Toista nämä vaiheet tarvittaessa jokaisessa taulukossa,, näkymässä ja sarakkeessa.

15. Kun olet valmis, julkaise muutokset valitsemalla Julkaise kaikki mukautukset. Sen jälkeen voit sulkea Oletusratkaisu-ponnahdusikkunan.

JavaScript-esimerkkifunktio

Mukautettujen kuvakkeiden ja työkaluvihjeiden näyttämisen JavaScript-funktio odottaa kahta seuraavaa argumenttia: kohteessa layoutxml määritetty koko rivin objekti ja kutsuvan käyttäjän aluekohtaisten asetusten tunnus (LCID). LCID-parametrin avulla voit määrittää työkaluvihjeen tekstin useilla eri kielillä. Lisätietoja tuetuista kielistä on artikkelissa Ympäristösi alue- ja kieliasetukset. Luettelo koodissa käytettävien aluekohtaisten asetusten tunnuksen (LCID) arvoista on kohdassa Microsoftin määrittämät aluekohtaisten asetusten tunnukset.

Oletetaan, että lisäät mukautettuja kuvakkeita asetusjoukolle, jonka tyyppi on Määrite. Sillä on rajattu määrä ennalta määritettyjä asetuksia. Varmista, että käytät kokonaislukuarvoa otsikon sijaan, jotta lokalisoinnissa ei tapahdu virheitä.

Mallikoodi näyttää kuvakkeet ja työkaluvihjeet yhden arvon perusteella kolmesta (1: kuuma, 2: lämmin, 3: kylmä) opportunityratingcode (luokitus) -määritteessä. Mallikoodi näyttää myös, miten lokalisoidun työkaluvihjeen teksti näytetään. Tätä mallia varten on luotava kolme kuvaverkkoresurssia, joiden kuvien koko on 16 x 16 ja joiden nimet ovat seuraavat: new_Hot, new_Warm ja new_Cold.

function displayIconTooltip(rowData, userLCID) {      
    var str = JSON.parse(rowData);  
    var coldata = str.opportunityratingcode_Value;  
    var imgName = "";  
    var tooltip = "";  
    switch (parseInt(coldata,10)) { 
        case 1:  
            imgName = "new_Hot";  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Opportunity is Hot";  
                    break;  
                default:  
                    tooltip = "Opportunity is Hot";  
                    break;  
            }  
            break;  
        case 2:  
            imgName = "new_Warm";  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Opportunity is Warm";  
                    break;  
                default:  
                    tooltip = "Opportunity is Warm";  
                    break;  
            }  
            break;  
        case 3:  
            imgName = "new_Cold";  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Opportunity is Cold";  
                    break;  
                default:  
                    tooltip = "Opportunity is Cold";  
                    break;  
            }  
            break;  
        default:  
            imgName = "";  
            tooltip = "";  
            break;  
    }  
    var resultarray = [imgName, tooltip];  
    return resultarray;  
}  

Mukautetun kuvakenäkymän näyttämistapa

Ensisijaiset sarakkeet

Taulukon ensisijaisessa sarakkeessa käytetyt mukautetut kuvakkeet korvaavat järjestelmän luoman oletuskuvakkeen ruudukkoluettelonäkymässä.

Muut sarakkeet

Mukautetut kuvakkeet, joita käytetään sarakkeessa, joka ei ole taulukon ensisijainen sarake, näytetään ruudukkoluettelonäkymässä toissijaisena kuvakkeena järjestelmän luoman oletuskuvakkeen lisäksi.

Korttilomakkeet

Mukautetut kuvakkeet korvaavat järjestelmän luoman oletuskuvakkeen, kun näkymä on määritetty käyttämään korttilomaketta.

Katso myös

Mallipohjaisen sovelluksen näkymien ymmärtäminen