4. Add parameters¶
Click on “edit page layout” again to go back to the edit mode. By clicking on the top-right cog-like icon in your widget, you bring up the widget’s configuration panel. It currently reads “Nothing to configure”.
Widgets on a hub (called widget “instances”) can have parameters, and multiple widget instances on the same hub can have different values for those parameters. It is up to the widget class to declare what parameters it accepts.
4.1. Add the parameter¶
Add the following attribute to WorkshopWidget
in
workshop_widget/__init__.py
to make it look like:
class WorkshopWidget(Widget):
name = "workshop-widget"
position = "both"
parameters = [
dict(
name="text",
label="Text",
default="The workshop widget",
help="The text to display.",
),
]
4.2. Update the view¶
Now that the parameter is declared, modify the root view to take it into account. It should look like:
class BaseView(RootWidgetView):
def get_context(self, instance, *args, **kwargs):
return dict(text=instance.config["text"])
You have overridden the get_context()
method. It takes the widget instance
as first argument. This instance
argument is a database record, an instance
of the hubs.models.Widget
class. The values of the widget parameters are
available in the instance.config
dictionary.
The return value of the get_context()
method will be used as context to
render the view template.
4.3. Update the template¶
Modify the workshop_widget/templates/root.html
template to use the new
variable, like this:
{% block content %}
{{ text }}
{% endblock %}
4.4. Restart the server¶
From now on, it will be easier to have one terminal tab logged in the VM with
vagrant ssh
, and one terminal tab opened in the code directory
(widget-workshop/widget/workshop_widget
). The contents of the code
directory will be automatically synced to the VM in the
/srv/hubs/widget-workshop/widget/workshop_widget
directory, so you don’t
need to edit the files inside the VM.
Start the server again with honcho start
on the VM, go back to your hub in
your web browser and reload the page. Click on the “Edit page layout” button
again, and click on your widget’s cog icon in the top right. It now brings up a
dialog with a text field. Change the text and click on “Save”. The widget’s
text has now been updated, click on the “Save changes” button to go back to
“view” mode and see the changes.