LinkedIn
Twitter
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.
-
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.)
-
Add table to Appsheet Editor
-
Make sure this table has full editable mode, i.e. can add, update, delete.
-
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.
-
Make sure you now have “values” on this table with single row.
-
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”.
-
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.
-
Add one Virtual Column with name “blank” and put app formula " ". Basically this generate null value, which won’t be visible.
-
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 = BackgroundAs example, overall editor looks like this.
-
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.
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
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.
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.
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.
haha, they are flying over Tokyo.
In terms of Gif images for Appsheet, I m playing around with it, using like an animated banner like this. Set gif to image header for detail view and add another text column to turn it over to dynamic banner?
To generate gif file, i found Canva is actually useful.
https://www.canva.com/pro/animator/
Once we create the animation, then download as GIf and push into Appsheet.
Not exactly sure where you are doing wrong, as it is relatively easy set ups.
This is a screenshot from my apps, which may help you to compare with yours to find a point for correction?
According the image from your column setting (Which i’ve marked with red), I have some questions:
- Are those column are virtual columns?
- In “Refresh App” and “Icon” column, there is a formula there (context…), can you show me that formula? I reckon I missed that formula.
I’m sorry for troubling you a lot bro.
Have a nice day!
