Create Custom Home View or Landing Page

Appsheet “About” page and view is currently not really “customisable” for the moment, but some may want to generate landing page with more unique ways, and I was one of them. This would improve the appearance and users experience with app I believe.

This is just a simple trick in terms of how to create such by using Appsheet generic features alone. I suspect some app creator has been doing the same or similar and putting view in place to their app, but I will place this post for reference by user who does not know this trick.

To see is to believe, please have a look at this short movie.

This is basically super easy, and nothing difficult, but need to set up new simple table and follow a fixed path. See the steps to generate such a view.

  1. Generate new table with list of the column you wish to place on the landing page. Such as Appname, etc, any sort of strings you wish to have. Make sure to have one image type fields, this image file will be used as background image of the landing page. (On my sample I use Gif file, but we can place any image file which Appsheet accept.)

  2. Add table to Appsheet Editor

  3. Make sure this table has full editable mode, i.e. can add, update, delete.

  4. We utilise only one row out of this table. Add the row value either directly on your data source (spreadsheet) or view through the app view by adding new row.

  5. Make sure you now have “values” on this table with single row.

  6. You already may have “view” within you app. Anyway either way, generate “Detail View” out of this table and select “Detail View” at the end. Let’s place the name of this view as “Home”.

  7. Now probably you see the detail view with data you already kicked in. Hit edit and go to edit mode. Upload image file to image type field and save view.

  8. Add one Virtual Column with name “blank” and put app formula " ". Basically this generate null value, which won’t be visible.

  9. Go to view setting. My sample app, it looks like this.

    9.1 : I recommend to set Position to Menu as this should not be frequently used view, but place this whenever you want to place.
    9.2 : Pick your image field for Main Image
    9.3 : Header Columns, select “Blank” column.

    *****Tips : You can place columns, such as App names, name of the site the app used etc into Header columns, rather than putting blank field. When you select fields, then it appears on the landing page. It s your choice and preference.

    9.4 : Column Order, place the fields you put on. Those field will appear within the box which sit in the middle of the view in selected order.
    9.5 : Display mode = Select “Centred”
    9.6 : Image style = Background

    As example, overall editor looks like this.

  10. Go to table setting and then turn the setting of this table as “READ-ONLY”.

*Job completed, now you will see your own customised home/landing page whatever we call.:smiley:

We can set this view as “start view” by going to UX pane, Options.

[Options to decorate view and make the view more actionable]

Below is just options. Possibility should not be limited, I welcome to hear what sort of optional trick you will find, interested to hear your feedback.

  • Can add URL type column with hyperlink expression to place a link button to navigate and guide the user for the different and target view after landing page.
  • Add actions, display overlay, prominently, inline
  • add additional either image/thumbnail type column to kick into text box item. Gif file is one of my favourite to add.

**** I’m using Giphy to generate and host Gif.image file. Very useful and handy to generate gib out of the existing mp4 or other media.

https://giphy.com/
  • Show if constrain to control and change item to show and hide based on users devices.

  • Hide field name to appear by changing display name of column to " "

  • Possibly more!

This is mobile view for the same sample. On the mobile phone, we are able to use action to refresh the page without interrupting the use of the app by user. But some app user does not know this option is actually available even though we remind them before. So as additional reminder and guide to user, I added gif image of down arrow like my sample.

That’s it.

Enjoy creating nice Apps, everyone.

Cheers.

Koichi Tsuji

8 Likes

@TDhers
@carie
@morgan
@praveen
@Phil
@Peter
@Santiago

Thanks @tsuji_koichi

For others info, we had a really enjoyable visit from Koichi a few days ago. He spent a couple of days in Seattle with our team. Koichi really has some very cool uses of gifs and animation on the sync screen. And some very good feature asks for our team. Thanks Koichi and thanks for sharing with the whole community also.

1 Like

Hi @praveen thank you for your comment, and yes it was great opportunity for me to drop myself to your nice office last week, and meeting with you and all of the team mates as well. Glad to be a part of Appsheet team and community.

This community and your team always give me great support and brings ideas up, which inspire me do something new all the time.

I will keep trying to contribute more to the commuity to let Appsheet stay as the world best app creating platform.

Backing to the story about this post. To get far more better UI and UX experience to my app users, I started to learn new skills, Photoshop. Using some material (photo) I took during my stay in US, i m now playing around. In the downtown (not far from your office) , there was Chewing gum street and i made a visit. Some may say disgusting ? but it looks really a Culture and Art. I made a image for wall paper .

Maybe use those on my future apps.

They are chewing gums pasted on the wall of the street, but looking like a jewelleries found in the town by chance. I was really joyful trip and meet in Seattle.

I hope someday and sometime in the future, you guys host some events, Meet up, to see all the friends from this community.

3 Likes

thank you very much Koichi for sharing your tip.
One question: Why do you need the [Blank] column as a header?

Hi Fabian,

Sorry not to mention to it. Good question indeed.

Trick is simple.

When we leave nothing column selected for header, the box which sit in the middle is going to be pushed up, which looks bit ugly to me. In order to push the box downwards, place blank column. Actually blank column is exist on HTLM but actually not visible to us as it is kind of null.

See the 1st screenshot below, the result of inspection of the page. Actually header element is existing on HTML but it is not visible.

See the screenshot below to see how view is going to be looking like when we leave header section untouched.

If the box overwrap oddly with the background image, we can move the box position up and down by adding blank fields as I explained.

If we place the box at the bottom like my sample overlap with the image, hiding main object, then we may place the box at the top by leaving the header section empty (no column selected)

It is depending on what sort of image or gif file you would like to you and position of the box will be contrasted with your image. User decide the best location, by adjusting box by selecting blank fields or nothing selected.

1 Like

Actually we can place any column to header. Then this is another sample how it looks like when we add App Name for instance to header.

20

53

Awesome. Thank you very much for this tip.

More than welcome.

Very slick looking…
Can I use that tanker GIF?

I have been engaged in commercial operation for tankers, but this vessel on sample gif is not tanker, but dry bulk carrier.

But that doesn’t matter.

I understand this is license free mp4 I found on the web, but should give a donation to support creator.

See the link you will find the original mp4 file which is for download. Then I placed the mp4 to Giphy to convert to Gif. Easy easy.

There are bunch of other high quality movies from this creator, I love and respect his works.

https://www.pexels.com/video/aerial-view-of-a-bulk-carrier-1474411/

2 Likes

You are correct. That’s great, thanks!

Man that’s so cool.

I don’t want to trouble you but I’m having some difficulty understanding how to do this. Your instructions are quite detailed but I wonder if you would be willing to make a prototype public. I find it easier to learn by analyzing a working sample app.

Hi Kirk,

Thank you for your suggestion. Sure, dude.
Bear with me for a bit, I will generate the quick sample and place somewhere people can access publicly.

1 Like

A note for @Fabian, @Grant_Stead, and other followers of this thread. @tsuji_koichi and I wound up continuing the discussion here:

1 Like

@praveen @Fabian @Grant_Stead @Suvrutt_Gurjar @Peter @TDhers
@carie @morgan @Phil @Santiago

I created Sample App and put on my portfolio, this is link to it.

https://www.appsheet.com/samples/Sample-App?appGuidString=70d2ae91-3ce9-4195-a8b6-fa5a5fc7e024

Hoping this will be found useful by the community.

I will place another sample app and add to my portfolio for sharing tips and tricks. Stay tuned!!

3 Likes