Enter values into an input component to use with other components.
Ways to use an input
Provide input value for several components filters
By binding a single input to multiple components (such as tables, detail or card lists), multiple sets of data can be filtered on a single criteria.
You add a input component called CompanyName. You bind this to the Employees, Orders, and Inventory tables in your space to find records for a specific company.
We'll walk through an example using multiple components in the configuration details below.
Use its value to prefill fields in another component
Sometimes you may want to use the value in the input component as a field in components like buttons or forms.
You have an “Activate” button that requires a UserID field. You can bind this to a filter component, so that whenever this button is clicked, the value in the filter component is used as the UserID.
Configuring your input
Setting up an input is quick - much of the work will happen when you bind to this input through another component's configuration. Give your filter a name and enter in the placeholder text inside the filter.
If you want to have a value prefilled in this input filter, you can define it here. Pre-fill it with a value from other components, set a template (which can use other variables), set a UUID or set to null.
Choose what format the values this input will have.
You can create visibility rules that will determine when this component is visible and able to be interacted with.
Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).
Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Width: Set the width of this component as a number of pixels or as a % of the containing unit.
Height: Set the height of this component as a number of pixels or as a % of the containing unit.
If the component is a top-level component, the containing unit is the Space canvas.
If the component is in-line within another component, the containing unit is the parent component.
If the component is within a flexbox component, the containing unit is the flexbox.
Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.
Let's say we have a table of Companies and a card list of Employees that belong to each company. We want to create a tool that will allow us to search for a particular company and display only their employees in the card list.
We can create an input called companyid and set the text to "Enter a Company ID".
Next, we'll go to the Companies table settings and set it to be filtered by the id column using the value from the companyid input.
We'll also go to the Employees card list settings and set this to be filtered by the company id using the value from the companyid input.
Once these are set up, whenever a user inputs a company id into the input at the top, you'll see both the table and the card list filter the results to just that company.