Skip to main content

​
What is a Widget?

Widgets are powerful tools used for representation, calculation, and organization of data in the calculator builder. You can think of widgets as the building blocks of every template. All widgets have a certain set of inputs (either entered by the user or obtained from another widget in the template), and a certain set of outputs which could be as simple as creating an interface for data entry or as complicated as a table with multiple columns and rows.

​
Widget Main Functions

Input Interface

  • Scalar data entry
  • Data selection
  • Table creation

Data Organization

  • Structure complex data
  • Manage relationships
  • Control visibility

Calculations

  • Mathematical computations
  • Conditional statements
  • Matrix manipulation

Visual Display

  • Text and labels
  • Images and diagrams
  • Graphs and charts

​
Widget Interfaces

Widgets are built to have two interfaces:

​
Preview Mode

For end users - summarizes important information meant for the user to see, comprehend, and input data.

​
Pause Mode

For engineers - to edit their widgets in the template editor.

​
Widget Components in Preview Mode

When expanded, widgets typically display:
  1. Widget Description - Explanation of the widget’s purpose
  2. Formula Reference - Mathematical formulas used
  3. Reference Image - Visual aids and diagrams
  4. Checks - Validation and verification rules

​
Widget Components in Pause Mode

All widgets share these common sections:
  1. Widget identifiers - Label, symbol, referenceId
  2. Default values - Initial values
  3. Visible if - Visibility conditions
  4. Widget core function - Type-specific functionality
  5. Checks - Validation rules
  6. Description - User-facing explanation
  7. References - Code/standard references
  8. Reference Image - Supporting visuals
  9. Author Notes - Internal documentation
  10. Other Options - Export, visibility settings

​
Widget Selection Process

Widget Selection Process

​
Available Widget Types

Input Widget

Primary user input field for data entry

Equation Widget

Performs calculations and displays results

Lookup Widget

Dropdown selection from predefined options

Table Widget

Multi-row, multi-column data management

Section Widget

Organizes widgets into logical groups

Diagram Widget (Legacy)

Pre-built diagrams for common engineering visualizations

Custom Diagram Widget

Creates interactive diagrams with custom elements

Image Widget

Displays static or conditional images

Remote Widget

Connects to external solvers (FEA)

​
Widget Management

​
Adding Widgets

Drag the widget type from the upper left side of the builder in “Pause” mode to create a new widget.

​
Editing Widgets

Use the buttons at the upper right corner of every widget to:
  • Edit properties
  • Delete widget
  • Duplicate widget
  • Move widget
  • View information

​
Display Options

At the bottom of each widget (Other Options), you can control:

​
Best Practices

  • Choose the appropriate widget type for your data and calculation needs
  • Use meaningful labels and symbols for clarity
  • Add descriptions and references for documentation
  • Test visibility conditions thoroughly
  • Consider the user experience in both preview and print modes

Input Widget

Primary user input field for data entry in Calcs.com templates

Equation Widget

Perform calculations and display results in Calcs.com templates

Image Widget

Display static images that can change based on conditions

Lookup Widget

Comprehensive guide to the versatile Lookup widget and its three main variants for different use cases

Text Widget

Guide to implementing text widgets as a subtype of equation widgets with Markdown support

Section Widget

Create section headers and organize content in templates

Diagram Widget

Overview of diagram widgets for creating visual representations in Calcs.com templates

Widget FAQs

Frequently asked questions about implementing and configuring widgets in Calcs.com templates

Table Widget

Create flexible tables with multiple column types for data organization and manipulation

Learn How to Reference Tables in Equations

After you add a table widget, use its reference ID in other widgets with matrixSubset, col, T(), and related patterns.

Map Widget

Display embedded Google Maps at specified latitude/longitude coordinates

Framing Widget

Guide to the specialized framing widget for structural analysis templates

Remote Widget

Connect to server solvers for complex calculations and FEA analysis

Dynamic Lookup Widget

Create dynamic dropdowns with values that change based on conditions

GIS Widget

Guide to implementing GIS widgets for geographic data queries and mapping functionality

Subsheet Widget (2-Way Linking)

Experimental widget for automatic creation of dependent calculations with bi-directional data synchronization

Special Members Equation Widget

Guide to implementing the special members equation widget with specific syntax for member collections

How to Add a Custom Cross-Section Diagram in Calcs Builder

Step-by-step with a rectangle: width and length inputs, a section-properties remote widget, and a cross-section diagram, plus why both solver and diagram steps are needed.

Lookup Shared Table

Guide to implementing lookup widgets that access Excel file data with advanced filtering and data organization

Lookup Data Table

Guide to creating lookup widgets with custom data tables defined directly in the calculator builder

Lookup Toggle

Guide to implementing toggle widgets for binary true/false choices in calculator templates