Skip to main content

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;

Here is the layout of the page:

image.png

First, let's create 4 APIs.

1. /deleteFromGallery
Deleting an object from the collection.

image.png

2. /updateCollectionName

image.png

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.

image.png

The API is run when the page is loaded.

image.png

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.

image.png

On this page, the row container widget containing the List collaps has a transparent background.

image.png

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.

image.png

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.

image.png

Кожному віджету, який має відображати дані 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.

image.png

{{currentItem.text}} 

image.png

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.

image.png

The button to change the collection name is disabled if no changes have been made.

image.png

{{nameInput.text === getSingleCollection.data[0].name}}