Chapter 6: Displaying comments

In the last chapter we saved the comments to a database. In this chapter we’ll build the UI that shows what comments have already been made.

Click the “Design” button on Main in Anvil. Then, let’s drag a Data Grid component on to the page and name it dg_comments. Set the Name and Key property for each column to the following:

Data Grid Details

Name	Key
Comment	comment
By	user
At	at
State	id
Profit Ratio	value

Note

Data grids are special in that when you add one to your UI, a repeating panel is automatically created inside of it. In this case, the data grid we created will create a Repeating Panel component named repeating_panel_1, which you will see in the code block below.

Additionally, when we defined the “Key” for each column in the data grid, the repeating panel will use that key to access a value from whatever we pass in to the repeating panels items attribute. In our case we’re setting items to rows from the comments table, and using the column names as its keys.

Now let’s update our __init__ method to populate the data grid with the rows from the comments table.

# imports omitted

class Main(MainTemplate):
    def __init__(self, **properties):
      self.state_name = None
      self.profit = None
      self.logged_in_user = None
      self.repeating_panel_1.items = app_tables.comments.search()
      self.init_components(**properties)
      dashboard.register_event_handler('selection_changed', self.selection_changed_event_handler)

    # selection_changed_event_handler and btn_save_click omitted

and our btn_save_click to update when a new comment is made:

# Main code omitted

def btn_save_click(self, **event_args):
    app_tables.comments.add_row(
      user=self.logged_in_user,
      comment=self.tb_comment.text,
      id=self.state_name,
      value=self.profit,
      at=datetime.now()
    )
    self.tb_comment.text = ""
    self.repeating_panel_1.items = app_tables.comments.search()

Reload your extension in your dashboard, add a comment, and watch the table update!

Congrats! You now have a fully functioning Tableau Extension, built with Anvil X.

Looking for more to do? Check out the Value Override tutorial next to learn about dashboard settings. Or, try to add some of the following functionality to your chat extension:

• Hide the “save comment” button until a user selects a mark

• Format the “At” column of the data grid using strftime

• Handle multiple selections instead of just saving the first one

Download the resources used in this tutorial!

Click here to download a version of this app that will work with any dashboard

Click here to download the starter Tableau workbook

Click to view the full code for Main

from ._anvil_designer import MainTemplate
from anvil import *
from anvil.tables import app_tables
import anvil.tables.query as q
from anvil import tableau

from trexjacket.api import get_dashboard
dashboard = get_dashboard()

from datetime import datetime

class Main(MainTemplate):
  def __init__(self, **properties):
    self.state_name = None
    self.profit = None
    self.logged_in_user = None
    self.repeating_panel_1.items = app_tables.comments.search()
    self.init_components(**properties)
    dashboard.register_event_handler('selection_changed', self.selection_changed_event_handler)

  def selection_changed_event_handler(self, event):
    user_selection = event.worksheet.get_selected_marks()

    if len(user_selection) == 0:
        self.state_name = None
        self.profit = None
        self.logged_in_user = None
    else:
        record = user_selection[0]
        self.state_name = record['State']
        self.profit = record['AGG(Profit Ratio)']
        self.logged_in_user = record['logged_in_user']

  def btn_save_click(self, **event_args):
    app_tables.comments.add_row(
      user=self.logged_in_user,
      comment=self.tb_comment.text,
      id=self.state_name,
      value=self.profit,
      at=datetime.now()
    )
    self.tb_comment.text = ""
    self.repeating_panel_1.items = app_tables.comments.search()