# Adatok dinamikus lekérése komponenssel

> Dinamikus gomb készítése komponenssel: ikon és link metamezőkből, vezérlők, makró a Makrógenerátorból és a Customize field output.

A komponens (Component) modullal újrafelhasználható elemeket készíthetsz, amelyeknek az értékeit minden használatnál más forrásból adhatod meg. Ez a példa egy dinamikus gombot készít, amely az egyedi bejegyzéstípus metamezőiből veszi az ikont és a linket. A gombot a **Dynamic Field** elem rajzolja ki, és Elementorban, a blokkszerkesztőben és Bricksben is elkészíthető.

Előfeltétel, hogy létezzen egy egyedi bejegyzéstípus.

## Metamezők felvétele

1. Nyisd meg a **JetEngine → Bejegyzéstípusok** listát, és kattints a bejegyzéstípus mellett a **Szerkesztés** gombra.
2. A **Metamezők** részben kattints az **Új metamező** gombra, és vegyél fel egy **Text** típusú mezőt a linkhez.
3. Vegyél fel még egyet **Iconpicker** mezőtípussal az ikonhoz.
4. Kattints a bejegyzéstípus frissítése gombra, majd a bejegyzéseknél töltsd ki az új mezőket, és mentsd.

## A komponens elkészítése

1. Nyisd meg a **JetEngine → Listázások/komponensek** oldalt, és kattints az **Új komponens hozzáadása** gombra.
2. A megjelenő ablakban add meg a komponens nevét, és válaszd ki a komponens nézetét (szerkesztőt), majd kattints a **Komponens létrehozása** gombra.
3. A felső panelen kattints a fájl alakú ikonra, és a **Component Content Controls** fülön hozz létre három **Text** vezérlőt: a gomb szövegéhez, a linkjéhez és az ikonjához.
4. A komponensen belül add hozzá a **Dynamic Field** elemet. A **FORRÁS** legyen „Component Content Value”, az **OBJECT FIELD / META FIELD / REPEATER KEY / COMPONENT PROP** mezőbe pedig az ikon vezérlőjének nevét írd (a név a **Component Content Controls** beállításainál látszik).
5. Kapcsold be a **Filter field output** kapcsolót, és a **Callback** listából válaszd az „Ikon beágyazása az Iconpickerből” elemet.

## Makrók a vezérlőkhöz

A gomb szövegét és linkjét egy makróval illeszted a kimenetbe. A makrót a Makrógenerátor készíti el.

1. Nyisd meg a webhelyet egy új lapon, majd a **JetEngine → JetEngine → Makrógenerátor** oldalt.
2. A **Makró** mezőben válaszd a „Component Control Value” elemet, a **Control Name** mezőbe pedig a link vezérlő nevét. Másold ki a kapott makrót.
3. Cseréld a **Control Name** értékét a gomb szövegének vezérlőjére, és másold ki a második makrót is.
4. Menj vissza a komponens beállításaihoz, kapcsold be a **Customize field output** kapcsolót, és a **Field format** mezőbe írd:

```html
<a href='%a link makrója%'>%s %a felirat makrója%</a>
```

A két helyre illeszd be a fent kimásolt makrókat. A `%s` az ikon, amelyet a callback állít elő.

5. Tedd közzé a sablont.

A Makrógenerátor részletei a [Shortcode- és makrógenerátor](https://hub.hellowp.io/hu/plugins/jet-engine/generatorok/) fejezetben vannak.

## A komponens használata az oldalon

1. Nyisd meg az egyedi oldal sablonját, ahová a gombot szánod, és add hozzá a komponenst a neve alapján.
2. Állítsd be a vezérlőket. A gomb szövegét (például „Tovább”) egyszerűen beírhatod, ha minden bejegyzésnél ugyanaz.
3. A link és az ikon mellett kattints a **Dinamikus címke** ikonra, válaszd az „Egyéni mező” (Custom Field) elemet, és válaszd ki a korábban létrehozott link- és ikonmezőt.
4. Tedd közzé az oldalt.

## Eredmény

A bejegyzéstípus egyik bejegyzésének oldalán a gomb a megadott szöveggel és az adott bejegyzés ikonjával jelenik meg, és rákattintva a bejegyzés linkjére visz.