[PAID] Schema ListView - Render Large Lists with Any Design

[iamwsumit (Sumit Kumar)]

Schema List View

This extension helps you to create list view of any type of design with schema very easily. This extension uses recycler view library that allows you to larger no of lists smoothly without any lag.

Features of this extension:

• Inbuilt Recycler View.
• Inbuild Image Loader to load heavy images from URLs.
• Supports schema and template.
• No separate component creation required.
• Inbuilt Search Function.
• Inbuilt Click Listener.
• 20+ Item Animation.
• 64+ scroll animations.
• Supports Grid View.
• Smooth Scrolling.

All Blocks

Orientations and Layout manager

Scrolling Animations

Item Animators

Documentation

Let’s see a quick documentation of all the blocks.

ErrorOccurred

This event raises when any error is occurred

error

text

SetValues

This event is triggered when the list is scrolled, you must fill/update the data to your component here with respect to the index.

parent	any
index	number

ItemClicked

This event raises when any component is clicked, returns the index, id and the component. You must enable the click listener for the component for this event.

index	number
component	component
id	text

ItemLongClicked

This event raises when any component is long clicked, returns the index, id and the component. You must enable the click listener for the component for this event.

index	number
component	component
id	text

ScrollChanged

This event raises when list is scrolled

x	number
y	number

ReachedTop

This event raises when list is scrolled fully and reaches to the top end

offset

number

ReachedBottom

This event raises when list is scrolled fully and reaches to the bottom end

offset

number

OnSearch

This event raises when search block updates lists with the given keyword, this will return all the list that you used in Configure block. You must update your data list in order to show new data. Returns the all lists in a single list.

sortedList	list
search	text
total	number

Initialize

This block initializes the list view in the given container with given configuration

in	component
type	number
orientation	number
reverseLayout	boolean
schema	text
clickListeners	list
animation	text
total	number

SetTotal

Set the total no. of the item for list view

total

number

RefreshListView

Call refresh for all items in the list view

RefreshListForRange

Refreshes the list view for a given range

start	number
end	number

GetComponent

Returns the component with given id from the given parent object

returnType : any

parent	any
id	text

SetProperty

Set the given property of given component

component	any
propertyName	text
value	text

SetProperties

Set the given properties of given component

component	any
properties	dictionary

LoadImage

Load the image to given image or arrangement from given url

component	component
url	text
loadingImage	text
errorImage	text

ConfigureSearch

Register your all lists in a single list here, these lists will be used to search string and find result.

lists

list

Search

This block searches the given string in the registered lists, make sure you have configured the lists before.

search

text

ClearSearch

If you want to show original lists again or clear the search then use this block.

NotifyItemChanged

This block updates the item of given index, make sure to update the data in your list

index

number

NotifyItemInserted

This blocks insert a new item to given index, make sure to add the data in your list

index

number

NotifyItemMoved

This blocks moves to items of given indices, make sure you update the data in your list

fromPosition	number
toPosition	number

NotifyItemRemoved

This block removes the item of given index, make sure to remove the data in your respective lists.

index

number

Scroll

This block scroll to the given index

index	number
smooth	boolean

ScrollToBottom

This block scrolls the list to the bottom end

smooth

boolean

ScrollToTop

This block scrolls the list to the top end

smooth

boolean

GetFirstVisibleItemIndex

Returns the index of first visible item of the list view

returnType : number

GetLastVisibleItemIndex

Returns the index of last visible item of the list view

returnType : number

GetHorizontalOffset

Returns the horizontal offset

returnType : number

GetVerticalOffset

Returns the vertical offset

returnType : number

ItemAnimator

Set the recycler list view item animator, Note: Item Animator and Animation parameter of Initialize block is different. ItemAnimator only plays animation on add/remove items.

AnimationDuration

Set the animation duration, this is not for item animator. Make sure to set this property before Initializing else it won’t work.

ReverseAnimation

Set true if you want the animation to be played all time on scrolling list.

GridSpanCount

Set the no. of columns for grid list view, make sure to set this before initializing the list view.

Documentation generated with Getaix

How to Use

Let’s see a quick usage of the extension. (Usage blocks are of Kodular).

Generate Schema

Since this extension works on schema template principle, here is how you can generate or create template.

Method-1:

There are two schema generators available that you can use to generate your schema.

https://www.sumitkmr.com/dynamic-schema/

DynamicComponents Schema Generator for AI2

Guide is also published here:

Schema Generator - JSON Schema Generator for Dynamic Components

Hello Everyone, I’m Sumit Kumar, I am here to introduce Github Page This is a single web page tool that I have designed, this will help you generate JSON schema for dynamic components extension without any python or PC. This is a very easy tool that generate schema in 3 seconds! How to use It works same as the normal python schema generator by Yusuf Cihan. Create a design in your AIA and export it. [image] Note: Do not include any extra component in your design, it may affect the …

1. Create the design that you want to use, after creating it export your AIA.

   

   Note: Use only those components which are required.

2. Upload to the generator and enter the screen and author name.

   

3. Now click on generate button and you will get your schema.

Method-2(Only for AI2):

1. Create the design that you want to use, after creating it just select the main/parent component like this.

   

   Now press Ctrl + C

2. Go to block section and take a text block and press Ctrl + V.

   

   You can now use this string template in this extension to proceed.

Blocks

Let’s play with blocks now.

Before initializing, configure your properties like animation etc.

Here is a list of names that I will use to render data on the list.

Now initialize the list view with template, animations etc.

in : Horizontal/Vertical Arrangement, this will not work with scroll arrangement.
type : Linear/Grid
orientation : Horizontal/Vertical
reverseLayout : pass true if you want to use reverse layout i.e last item of the list will be shown first.
schema : JSON template of your design.
clickListeners: You can enable the clicks on your component directly from here, pass the ids of all the components in a list on which you want to enable the click.
animation : Set scrolling animation
total : Set the total amount of list that you want to show.

Here, you have to fill your data in the components. For example, I am using a simple list view that has a label which shows usernames, so now I will use this event SetValues to set the user names on the label from my above list. Use GetComponent to get the component from the id. You can also perform other tasks here.

This extension provides you direct event to get click on the component, you just need to enable the clicks on Initialize block. This event returns you the id, component and index of the item which is clicked.

So this was the basic usage of the extension for rendering a simple data list.

Set the textbox empty or search empty string and your original data will be return by OnSearch event to reset the list again, it’s like closing search bar.

Add Item

Use NotifyItemInserted to add a new item at any position, just make sure to add the item in your list. Just handle your list and leave the rest to extension

Demo

Remove Item

Use NotifyItemRemoved to remove an item at any position, just make sure to remove the same item from your list.

Demo

Move Item

Use NotifyItemMoved to move an item from any position to any new position, just make sure to update your data list accordinly.

Demo

Search Feature

This extension provides the search function that allows you to implement search feature very easily. Let’s see how to use it.

For implementing search, first you have to use ConfigureSearch block to register the lists that you want to use for searching strings. This block accepts a list of multiple lists. For example, if you have data like name, surname, address. And you want to search a string in all of these list then just give these lists to this block.

I have created a search bar to get input of the search.
Now track the textbox text and use Search block to search the string, this block will search the given string in the lists that were used to registered by ConfigreLists block.

Once the search is done, OnSearch event will be triggered with the new data, you must update your data list here to show the user new data. sortedList return a list of lists as the search operation were performed in multiple lists(that were registered), so I have used here select list item block to update my original list. This will update and show the new data to users.

Demo

Tutorial

Schema List View Extension in AI2, Kodular and Niotron | Inbuilt Search feature and 60+ animations

Screenshots

Price

For India :- ₹499
Outside India :- 7$

[PAID] Schema ListView – Render Large Lists of any Design with many advanced...

Credit

Thanks @Shreyash for the super power full Rush .
Thanks @ashishlambat5 for helping in testing.

Thank you
Sumit​

[Franklin_Lopez]

What is the difference with your Recycler View extension? Will it perform better?

[PAID] Recycler View - An Extension for creating recycler view in your apps

Custom Recycler View Hello everyone, Today I am publishing my biggest extension ever I made. This extension allows you to create recycler view in your app. This extension works with dynamic components extension by @yusufcihan and you can also use kodular in built dynamic component for making recycler view. This recycler view is different from other. How :- It has grid supported with your desired rows and you can also create the horizontal recycler view too through this extension. This extensi…

[JEWEL (Extension Developer 🧩)]

A great work again from you

[iamwsumit (Sumit Kumar)]

@Franklin_Lopez

Will it perform better?

Yes, because of the schema, extension has more control over your design layout, and it manages the layout structure in best possible way which increases the performance little bit.

Main Differences:

• You don’t need many blocks to create list in this extension and it’s far easy to implement this extension.
• This extension does not require any other extension to work.
• Inbuilt image loader and search function.
• Support AI2 schema template.

Also, recycler view extension can be used with any type of dynamic component extension, it can work with inbuilt dynamic components, and all other extensions that are available.

[ashishlambat5 (Ashish Lambat 🇮🇳)]

This is really nice extension, If you are beginner or pro developer you can use this extension. If you have to use recycle list in your project so you can create with minium blocks. & Main things is (Search options) you can set search function with single block…

[The_K_Studio (Karan M.)]

Nice extension. Good job

One question, as you are using schema template and when working with large number of list items with images, does the scroll works smoothly? Because i see in Dreamers Recycler view extension, the scrolling behaviour changes when used images in it.

[iamwsumit (Sumit Kumar)]

They need to be handled properly like using image loader etc. This extension has more control over your layout, and it tries to manage the scrolling experience in best possible way. Use light images as image placeholders.

[Abdul_Mutalib1 (Abdul Mutalib)]

help me, I tried but it didn’t work.

[iamwsumit (Sumit Kumar)]

Please explain your issue. What have you tried? Please post details here in order to get help.

[Amir_Perez (Amir Pérez)]

First of all, your extension is very usefull. God Job!!! So, I have some problems: How can I replace text property of a label “A” within a parent component when pressing a label “B” (clickable), both components are on the same parent. Is a block necessary to obtain the properties of the components or can it be done in some other way?

[iamwsumit (Sumit Kumar)]

Hi, it looks like I forgot to give a “parent” parameter to ItemClicked event, I will be pushing an update today then you would be able to do it.

Thanks.

Edit:

Your blocks should be like this:

[dovish_jindal]

recently purchased this extension. showing this error . can you help me. what i mistake in this

[Daniel_R_Soares]

Capitalize the first letter (Text) in the Property Name parameter

[dovish_jindal]

same error is showing component cannot be null

[dovish_jindal]

i think error in this area

[iamwsumit (Sumit Kumar)]

This error is generated when you use wrong ID to get component or to set clicks, make sure a component with ID text and HorizontalArrangement exists.

Also use correct property name :

@Daniel_R_Soares

Capitalize the first letter (Text) in the Property Name paramete

[dovish_jindal]

@iamwsumit

Here, you have to fill your data in the components. For example, I am using a simple list view that has a label which shows usernames, so now I will use this event SetValues to set the user names on the label from my above list. Use GetComponent to get the component from the id. You can also perform other tasks here.

[iamwsumit (Sumit Kumar)]

That is not the component ID, the name of the component = ID of the component.
So, in your case:

Lable1 and Horizontal_Arrangement is the ID.

[dovish_jindal]

then how can i use it. can you show me with blocks.

[Daniel_R_Soares]

@dovish_jindal Checks if all parameters are correct as in the image