Hi everyone,
For this week’s blog post, I’ve been doing some live coding. You can watch me build a full prototype of a simple financial application (complete with user accounts and subscription fees), in a little under an hour.
This app ties together a lot of things you can do with Anvil - accessing external REST APIs, plotting data, storing user accounts and data, charging credit cards, and more.
Check it out, and let me know what you think:
Comments please!
It must have taken some time to do research for this demo - that is, find a lot of use cases in order to show off as many of Anvil’s features as possible in a clear and direct way. I think the result is a good demo and I got a lot from watching the video.
Here is what I think is worth noting from the demo – and pardon for being a novice:
I liked that I could see a workflow from beginning to end - that’s something I’ve wanted for a while.
It’s good to see the implementation of many of the features listed in the documentation, but even more valuable is that I have been able to see some smart ways to implement code in the Anvil editor. For example, I feel I have a good understanding of using data bindings for repeating panels but was glad to see the control of items in top level forms (passing items into forms when instantiating them etc.).
It was also nice to see many small productivity enhancements, like resetting passwords directly in the users table to ensure quick setup of user from the start.
There were many small tricks shown in the Anvil editor and the UI that gave me a much clearer overview of what is possible through the editor, which is generally hard to explain in documentation.
I will highly encourage you to make another such in depth video, when you find sufficient new material, features – and time. Of course, you do not need to make videos for any use case, but I’m convinced that the videos are very good at tying features together in a quick and easy way - something that could never be done through the documentation or the forum (on the forum the topic will be often be directed towards a specific use case mixed with some general information).
One thing you could improve in the video is shorten it in the section where the stripe password is entered it is almost 45 seconds of nothing. I felt those seconds made a small dent in an almost perfect example of how easy anvil can be used.
Keep up the great work!
Very good.
Nice to see it warts 'n all (by that I mean mistakes not edited out).
I just cloned and tried the demo app. Be advised that the server function get_my_stocks() makes some bugs due to calling client_writable:
When a new stock is added to the data table the returned row does not contain a client writable view and therefore it is not possible to edit the stock in the first view. If you go back to the homepage and re-enter the stock you will pass in a row (client_writable) that has a client writable view and thereby be able to edit the stock.
Another quirk is that the returned rows from the above named function call is that the user objects are not passed to the client when filtering the user before the search (don’t now why exactly - please do explain). That means that it is not possible to delete a stock upon re-entering from the homepage as the user column is not present in the row.
However, when I call the function using:
return app_tables.stocks.search(user=me) + enable client writable on the stocks table
the user objects are passed in.
Thanks so much for the tutorial. I would like to be able to display the users’ stock portfolio list, stock chart and the stock name on the same form, rather than using open_form to do so as shown in the demonstration video.
What this means is that after clicking the link on a specific stock, the stock name (label) - this is where I’m at -
and the stock chart (graph) would then appear below the portfolio list, on the same form.
https://5OE3ZSIMHENAHUYD.anvilapp.net/IIF6FGKPGP2G6FI7BQPSRAMU
(use the log in name “abc”)
I think it has something to do with using get_open_form, but I’m not quite sure what to do next:
def btn_get_stock_click (self, **event_args):
get_open_form().linear_panel_stock
Ideally, I’d like to add buttons for the purpose of deleting next to each stock on the portfolio list, using the data binding for the user and the user’s stock.
Thanks for any help - I’m really new to web app development, and Anvil is an incredibly exciting tool for someone like me!
S
Welcome to the forums.
Anvil apps are essentially single page apps (SPA) so you can dynamically add components and they’ll magically appear. So, if you want to show a form embedded on the main form, then you ned to do something like this :
# Create an instance of your form (called FormName for the purpose of this example)
myform = FormName()
# Add it to the form
self.add_component(myform)
# Or add it to a container such as a column panel
self.column_panel_1.add_component(myform)
So you can drag/drop design your form adding buttons, etc. and embed it in your main form. On your button click event you can also pass to the form any parameters (such as stock code).
get_open_form() is only if you are inside your embedded form and trying to reference the encapsulating form, which I don’t think you are in this case.
Thanks, David. I’ve given it a go, but am hitting this error:
AttributeError: ‘RowTemplate’ object has no attribute ‘chart_panel’
as the button to click is embedded in the RowTemplate form which is called from the PortfolioPage form. What I’m trying to do is to have the chart appear on the same page as as PortfolioPage, where I’ve added a panel to contain the plotly chart, when called from RowTemplate:
self.chart_panel.add_component(‘StockView’,self.symbol_price,self.symbol)
rather than-
open_form(‘StockView’,self.symbol_price,self.symbol)
Here’s my attempt to date-
https://anvil.works/ide#clone:NXL2542VO4C2RQJG=TC6DW4PBWFZKWNC65CN6XJDT
Thanks so much if you or someone else can point out where I’ve gone wrong. It must be something very obvious, but I can’t seem to see what it is.
S
ok, to solve your immediate problem, import your form and replace your add component line with this :
# Needs to be imported
from StockView import StockView
...
# Create a new instance of your stock view form
myform = StockView(self.symbol_price,self.symbol)
# Add it to your form.
self.add_component(myform)
which was what I was getting at (though you could put all that onto one line I’ve split it for clarity). That adds the chart to the current line item form, which I think is what you are trying to achieve?
Just from a security point of view, I would also look to move your table searches to the server, returning the results to the form. The potential problem with searching client side is that you are passing a user id which could be tampered with in the browser, exposing other people’s data.
Many thanks David! Really appreciate that.
I have a better understanding now of what happens with add_component.
https://anvil.works/ide#clone:JXIYWXNKPORNLVGV=GZSQV7XKCZI2IQJQ4FZW4XID
However, the problem is that the chart is populated in the same panel (RowTemplate), rather than the chart_panel that sits below RowTemplate. The rationale of doing so is to only have 1 stock chart in view on the single page, which changes depending on which stock button is clicked, rather than what happens now where multiple charts are appearing after each stock button is clicked.
Noted on the table search from client-side security issue - I’ll start working on that next.
Thanks!
S