Tables are very useful components for showing a large collection of data. It was a very hard task to create table in sketchware. After doing some research I found there were no methods to create a table in sketchware. But finally I created a table view (Thanks to chechware for help ).
So in this tutorial I am going to tell you the method how to create beautiful tableview in sketchware.
Here is a preview of the table we are going to create
Download Section
To download all files of sketchware TableView you have to download "SWB Store" app in your phone.
.png) |
| SWB Store Home |
You can download tableview files and other projects too.
View section
There is no need of adding special or custom view.
Just add one linear and in my case I colored it to Dark Grey
Name of our linear is linear1
Import Blocks
1. Open Oncreate.jpeg)
.jpeg)
2. Click on bookmark icon and Then choose developer tools
3. A new screen will open Here select block manager
4. Here you will see list of your blocks and a + Icon in bottom right corner. Click on + Icon and enter any name and color
6. Click on 3 dots and then select Import Blocks | Choose your blocks file which you downloaded from swb store app
.jpeg)
7. Then select and import all blocks
8. After importing you will see a list of tableview blocks
Import Component
1. Come back to developers Tools Screen and select component option
2. A new screen will open | Click on 3 dots in top and then select Import option | Select your component file | In swb store app you'll get file link in Copy view code section
.jpeg)
4. Come back to Your project
5. Now go to component manager and select and create table component
.jpeg)
.jpeg)
Add libraries
1. You will get a zip from swb store app which contains all libraries and You have to extract and copy the inner files to .sketchware/libs/local_libs/
2. Then come back to your project and Go to library manager and turn on mTable library
Moreblock
1. Create A moreblock | Give it any name
2. Open moreblock and add blocks as shown in picture
.jpeg)
OnCreate coding
1. Open Oncreate and add blocks as shown
.jpeg)
3. For headers of list I used list string with key and for Data in table I used Listmap
4. And finally added Moreblock
Understand JSON
In this project i used the following keys
balance
picture
age
name
gender
company
email
And also My JSON data looks like
[
{
"balance" : "Value",
"picture" : "Value",
"age" : "Value",
"name" : "Value",
"gender" : "Value",
"company" : "Value",
"email" : "Value"
},
{
"balance" : "Value",
"picture" : "Value",
"age" : "Value",
"name" : "Value",
"gender" : "Value",
"company" : "Value",
"email" : "Value"
}
]