UI part. Creating the page
On this page, we will be using the following widgets:
- function widget. (It should automatically appear on a new page.)
- grid layout widget:
-
- row container widget:
-
- button widget;
- input widget;
-
- row container widget:
-
- list collaps widget (In the settings, disable 'show pagination,' adjust 'collaps height,' and set 'item spacing'):
-
- image;
- 4 text;
- button;
-
- list collaps widget (In the settings, disable 'show pagination,' adjust 'collaps height,' and set 'item spacing'):
-
- row container widget:
-
Here is the layout of the page:
First, let's create 4 APIs.
1. /deleteFromGallery
Deleting an object from the collection.
2. /updateCollectionName
3. /getCollectionsById
Fetching collection data by the 'id' field.
After specifying the endpoint path, add Params - the collection 'id' selected from the table on the Collection page.
The API is run when the page is loaded.
4. /getSingleCollectionImages
Fetching the image of the selected collection.
After specifying the endpoint path, add Params - the collection 'id' selected from the table on the Collection page. The API is called when the page is loaded.
On this page, the row container widget containing the List collaps has a transparent background.
In the List collaps widget, disable "show pagination", change the background to transparent, set the list item color to #ffffff, collaps height to 240, and item spacing to 15. Display the data from the API /getSingleCollectionImage.
Expand the widget that contains the first element of the list collaps to the desired height. We also added border radius and box shadow to it.
Кожному віджету, який має відображати дані API та знаходиться в середині List collaps вказуємо, яке саме значення він має відображати таким чином: currentItem.ключ_до_потрібного_значення. Наприклад, щоб показати картинку вказуємо currentItem.img
For each widget that needs to display data from the API and is located inside the List collaps, specify the exact value it should display using the following format: currentItem.key_to_desired_value.
For example, to display an image, use currentItem.img.
{{currentItem.text}}
Changing the date format:
{{new Date(currentItem.date).toUTCString()}}
After clicking the "Change name" button, we update the data on the page. Similarly, after deleting an object (using the "Delete" button), we update the data displayed on the page.
{{nameInput.text === getSingleCollection.data[0].name}}
No Comments