[HOWTO] 📋 Sort And Shuffle List Without Extension!

Tutorials and Guides
, , ,
1

This guide is an extension-free replacement for the ListUtils extension, if you do not know it, you can download it in All Extensions From AppyBuilder Community - #47 by Anke. This extension has been used for years (including me), but I recently discovered JavaScript solutions for this. Since you need extensions for Java code, but you do not need extensions for JavaScript, this is an extension-free method.

In this guide, I will be using two sample lists - a text-and-number list, and a number-only list. The number-only list will be used for finding minimum/maximum values, while the text-and-number list will be used for removing duplicates, sorting, and shuffling. I do know blocks-only solutions for this, this is just another method.

We will also have a list of action IDs to specify each action, e.g. sort, shuffle, to make life easier.

  • 1: sort.

  • 2: shuffle.

  • 3: remove duplicates (note: a number block of 1 and a string of 1 are considered different).

  • 4: max value.

  • 5: min value.

You will need an invisible WebViewer and a string to complete this. Don't worry, you can always download the AIA file to copy the code.

blocks
blocks1119×2258 320 KB

You will need an action and targetList variable to check the targetted list and action. You can ignore numbersList and textAndNumbersList in your app, but make sure to set the target list.

Should be set by now!

:bookmark_tabs: Q & A

Q1: Does it support iOS devices?

A1: No, not yet, because the iOS companion has still not implemented the JsonObjectEncode block.

Q2: You forgot the reverse block.

A2: No I haven't, you can find a native reverse list block in the Lists drawer.

:inbox_tray: Downloads

AIA:
SortList.aia (5.6 KB)

:movie_camera: Video

Kindly :email: PM me if you have any questions! Also, if you like my tutorial, please :heart: like it! It takes some effort for me to make it...

Likes tell me the general user feedback of my tutorial, and they keep me motivated. If you read this tutorial, please take 10 seconds to drop by and give a like if you like it!

If you have any features that you want to add to this tutorial, PM me or reply directly here.

Gordon Lu

:earth_africa: Website

5 Likes
2

As you will have seen from the method I posted, this can all be done locally using a webviewer and the RunJavascript block.

3

Yes, I agree, but I like the Apps Script method, because there are other functions in the script apart from the doGet method, for example

function shuffle(array) {
  let currentIndex = array.length,  randomIndex;

  // While there remain elements to shuffle...
  while (currentIndex != 0) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]];
  }

  return array;
}

Which looks much simpler with Google Apps Script.

4
5

No, not sorting, that is for shuffling a list...

6

You didn't read the page....

7

Woops, sorry, I thought you were refering to the top of the page. I see it now, looks much simpler...

array.sort(function(a, b){return 0.5 - Math.random()});
1 Like
8

Seems that the WebViewer method is simpler. Can you unlist this for a while so that I can do some rewriting?

9
10

Unlisted at OP's request

1 Like
11

and perhaps a better topic title:
Sort and Shuffle Lists on Device using the Webviewer

1 Like
12

Ok, I'm done now with the code! I'm editing the topic. :slight_smile:

13

Thank you, can you kindly list it now? I have rewritten it.

1 Like
14
15

Here is how to sort and shift using Blocks -

https://imagnity.com/tutorials/app-inventor/list-sorting-on-app-inventor/

https://imagnity.com/tutorials/app-inventor/shuffle-list-unique-random-numbers/

Isn't it amazing how many ways one can sort and shuffle using different techniques. Thank you for posting your preferred method. :astonished:

1 Like
16

Here is my method to sort a list using the webviewer App Inventor Code Snippets | Pura Vida Apps
Also a solution for lists of lists is available

Note: that solution has been written before the RunJavaScriot mehod was available and could be adjusted accordingly meanwhile...

Taifun

1 Like
17

Nice Tutorial @gordonlu310. but it would be better if you provide a way without using WebViewer too

1 Like
18

Currently this is the best extension free method. Apps Script is too complicated, and other methods have a lot of complicated blocks.

1 Like
19

but there is a little problem that you might not notice, the problem is in these three functions: sort, shuffle and remove duplicates. i.e. the results of the three are not returned in a list but in a string

20

Let's see...

You can use the JsonTextDecode block to turn JSON lists into App Inventor lists.

image

2 Likes