Accordion DB List |
  
|
Accordion DB List |
|
Accordion Property allows users to Hide or Show the Records. Accordion property when checked, displays Accordion properties. User can create Groups of the records and apply Accordion.
Property |
Description |
Accordion |
|
Accordion Header Height |
It allows user to set the desired height of the header of the Accordion . |
Accordion BG Color |
It allows user to set the desired Background color of the Accordion . |
Acordion Text Color |
It allows user to set the desired Text color of the Accordion . |
Accordion Icon Position |
It allows user to place the icon in the Accordion as "Left" or "Right"' |
Accordion Closed Icon |
User can select a custom image for the Accordion closed icon. |
Accordion Opened Icon |
User can select a custom image for the Accordion opened icon. |
Table Group |
|
Group By |
When Accordion option is selected, Group by property appears in Table Group. User can select the Database field on which user wants to group the Data. e.g "rating" as shown in the image below. |
Accordion View can be applied in DB List View Page. To know more follow the steps below.
Step 1: Create Remote Database, "sample". Output will be grouped by the field "rating" .
id_sample |
rating |
hotel_name |
hotel_image |
row_index |
1 |
five |
Taj hotel |
Taj.png |
1 |
2 |
five |
Crown Plaza |
Crown.png |
2 |
3 |
four |
Oberoi |
oberoi.png |
3 |
4 |
three |
Lemon |
lemon.png |
4 |
5 |
three |
Redfox hotel |
redfox.png |
5 |
6 |
two |
Wave Hotel |
wave.png |
6 |
7 |
two |
Star Plaza |
starplz.png |
7 |
8 |
one |
Chand Hotel |
chand.png |
8 |
9 |
four |
HolidayInn |
holidayinn.png |
9 |
Step 2: Create a DB List View Page.
a.Set DB settings properties
Service Name, Table Name
b.Set Accordion properties
c.Set "Group By" field under Table Group. e.g "[rating]"
d.Set Table Cell fields : Image , Main Text
Step 2: Preview the page. Observe the Accordion appearing by grouping the data with respect to "rating" field. Opened and Closed image appear respectively
