How do I rewrite my entire frontend with AppSmith?

[jpop]

Very serious post.

I have an image board that is a full NodeJS application with a Mongo database containing more than 8000 posts. I have grown to hate the frontend and because of a lack of skills never pursued re-coding it. Enter AppSmith.

I have the datasource connected to a backup of my production database to work with. I am able to do basic queries like pull a list of boards and link that to a Drop Down widget. I’m able to view an image using the filename stored in the database. At one point I was able to link the Drop Down widget with the Image widget so that when selecting a board, the last image posted to the specific board. Not sure why, but we started seeing errors indicating a field could not be found, even though the field definitely exists.

What we would like to do is completely rewrite the frontend using AppSmith with our current database structure and file system. Ideally this would be for all platforms: desktop, phone, tablet, etc.

Items we are trying to achieve initially:

• Drop down list of boards, selectable, with Next/Previous buttons
• Show the catalog (index page of all images per board, sortable)
• Show last posted image per board by date based on selected board
• Next / Previous buttons to display the images accordingly
• Admin controls for uploading, deleting, modifying a post
• Admin controls for signing up, user management

I think with a little help on the basic Drop Down stuff will help get us going. Hopefully, the rest will fall into place, like magic. I have been reading through the documentation and I’m just not seeing what I need to get this going the way I understand.

By the way, I’m hooked on AppSmith

Regards,
Jeff (JPOP)

Table / Collection Structure for a post:

[
  {
    "_id": "60b9b2698d33c5179223cad3",
    "date": "2021-06-04T04:56:09.104Z",
    "name": "Anon",
    "country": null,
    "board": "test3",
    "tripcode": null,
    "capcode": null,
    "subject": null,
    "message": null,
    "nomarkup": null,
    "thread": null,
    "email": null,
    "spoiler": false,
    "banmessage": null,
    "userId": null,
    "files": [
      {
        "hash": "3fdb6d20f140c8d20d02376035566ae1ca37304a309223b6deb10172cb457183",
        "filename": "3fdb6d20f140c8d20d02376035566ae1ca37304a309223b6deb10172cb457183.jpg",
        "originalFilename": "3fdb6d20f140c8d20d02376035566ae1ca37304a309223b6deb10172cb457183.jpg",
        "mimetype": "image/jpeg",
        "size": 85787,
        "extension": ".jpg",
        "thumbextension": ".jpg",
        "sizeString": "83.8KB",
        "geometry": {
          "width": 720,
          "height": 1114,
          "thumbwidth": 203,
          "thumbheight": 315
        },
        "geometryString": "720x1114",
        "hasThumb": true
      }
    ],
    "quotes": [],
    "crossquotes": [],
    "backlinks": [],
    "replyposts": 0,
    "replyfiles": 0,
    "sticky": 0,
    "locked": 0,
    "bumplocked": 0,
    "cyclic": 0,
    "bumped": "2021-06-04T04:56:09.104Z",
    "postId": 389,
    "replies": []
  }
]

[dancia]

@jpop Hey so glad that you are using Appsmith for the frontend revamp. Happy to assist

Could you share the error you are seeing regarding field not found and also where you are seeing this?

[jpop]

Hi Dancia,

Please refer to the example JSON in the main post for the rest of this answer.

The error is sporadic and sometimes doesn’t make sense. For example, when I use the suggested widget called Drop Down from a Query page, it populates this:

{{FindBoards.data.map( (obj) =>{ return  {'label': obj._id, 'value': obj._id } })}}

As you can see, that really is wrong because label and value cannot be duplicated or should not be duplicated. So I change to a different Query that pulls from a Collection containing everything I need for what I am trying to do. That is to create a drop down listing all my boards, then, upon selection, an Image widget is displayed showing the latest post in that board based on either date or by postId.

{{FindQuery.data.map( (obj) =>{ return  {'label': obj._id, 'value': obj.files[0].filename } })}}

This is where it complains, saying that files or filename is not defined, but it doesn’t need a definition if it is pulling from the same database table, does it? Because the data is there, files is at the root, 0 comes next, then several fields exist under the 0 including filename.

We had some of this functionality working, but, we are finding it real easy to produce an error that still shows positive results from the Query.

Jeff

[pranav]

Hey! so my primary hunch is one of the objects does not have filename property. Can you please write this same piece of code in JS object like following and run it there-
dummyFunc: () => return FindQuery.data.map( (obj) =>{ return {'label': obj._id, 'value': obj && obj.files[0] && obj.files[0].filename } }).filter((obj) => !obj.value);

this gives you list of items that have either empty list of files or have missing filename property. Can we please test this?

[jpop]

I am pasting that exact code in a JSObject, and it shows an error.

Jeff

[jpop]

Let’s start at the beginning using the JSON sample I put in the original message. Here is the Query settings I am using:

Query = blank
Sort = {date: -1}
Projection = {_id: 0, date: 1, board: 1, files: {filename: 1}, postId: 1}
Limit = 100
Skip = 0

This results with 100 entries containing the four keys in projection, sorted by date in reverse.

From the Query page, I simply use the Select (Drop Down) widget that automatically links the Query, and puts this in the Options box under General:

{{FindQuery.data.map( (obj) =>{ return  {'label': obj.date, 'value': obj.date } })}}

Which I change to this:

{{FindQuery.data.map( (obj) =>{ return  {'label': obj.board, 'value': obj.files[0].filename } })}}

The second line produces an error stating obj.files[0] is not defined. Which doesn’t make sense to me.

We are trying to make a simple drop down of all our boards, that also displays the latest image post in that collection.

Jeff

[pranav]

Hey! sorry could you please just remove the return (my bad).

dummyFunc: () => FindQuery.data.map( (obj) =>{ return {'label': obj._id, 'value': obj && obj.files[0] && obj.files[0].filename } }).filter((obj) => !obj.value);

Please share the result after running the function.

[jpop]

Here is the JSObject I created:

export default {
dummyFunc: () => FindQuery.data.map( (obj) => { return {'label': obj._id, 'value': obj && obj.files[0] && obj.files[0].filename } }).filter((obj) => !obj.value)
}

Here is the resulting Response:

[
  {},
  {}
]

Jeff

[jpop]

Hey pranav,

I do in fact have some collection data with empty field values. Specifically for the filename on some posts. How would I exclude this in my Query? I have tried a couple of different things with BSON types, but nothing has worked so far.

Jeff