Views and Layouts
Views define what users see when they interact with your NExS app. This guide covers how to configure views, work with multiple views, and control navigation.
What is a View?
A view consists of one or more rectangular ranges of cells from your spreadsheet that users can see and interact with. A view may be an entire worksheet (spreadsheet tab) or any blocks of cells within a worksheet. Think of it as a “window” into your workbook.
Cells outside the view are never seen by your users, which makes them convenient for things like scratchpad calculations.
A typical view is a single block of cells:
| A | B | |
|---|---|---|
| 1 | app | My App |
| 2 | view | Sheet1!A1:G18 |
This creates a view showing cells A1 through G18 on Sheet1. For responsive layouts, a view can also be made of several blocks — see Multi-Range Views.
Defining Views
Basic View Definition
In your NExS.app worksheet:
| A | B | |
|---|---|---|
| 1 | app | My App |
| 2 | view | Sheet1!A1:G18 |
Using Named Ranges
You can reference a named range instead of cell coordinates:
| A | B | |
|---|---|---|
| 1 | app | My App |
| 2 | view | MyDashboard |
Where MyDashboard is a named range in Excel pointing to Sheet1!A1:G18.
Entire Worksheet
To include an entire worksheet as a view, specify just the sheet name:
| A | B | |
|---|---|---|
| 2 | view | Sheet1 |
Default Sheet
If you omit the sheet name, NExS uses the first worksheet:
| A | B | |
|---|---|---|
| 2 | view | A1:G18 |
Multi-Range Views (Responsive Layout)
To allow a view to adapt to different screen sizes, specify a list of cell blocks separated by commas:
| A | B | |
|---|---|---|
| 1 | app | My App |
| 2 | view | Sheet1!A1:D18, Sheet1!E1:G18 |
Here the original range A1:G18 is split into two blocks: A1:D18 and E1:G18. On a wide screen the two blocks appear side by side; on a narrow screen, such as a phone, they stack vertically.
View Options
Naming Views
Give your view a descriptive name (appears in the view navigation menu). Unnamed views default to View 1, View 2, and so on:
| A | B | C | |
|---|---|---|---|
| 2 | view | Sheet1!A1:G18 | |
| 3 | name | Dashboard |
Background Color
Set a background color for the entire view (the default is transparent). This helps eliminate “ghost lines” between cells on some browsers:
| A | B | C | |
|---|---|---|---|
| 2 | view | Sheet1!A1:G18 | |
| 3 | backgroundColor | #f5f5f5 |
You can specify colors as:
- Color names:
white,lightgray,navy - Hex values:
#f5f5f5,#336699 - Cell reference:
A1(uses that cell’s background color)
Multiple Views
Create apps with multiple views for complex workflows or different audiences.
Example: Multi-Page Form
| A | B | C | D | |
|---|---|---|---|---|
| 1 | app | Insurance Quote | ||
| 2 | view | Sheet1!A1:F20 | ||
| 3 | name | Personal Info | ||
| 4 | editable | B3:B8 | ||
| 5 | view | Sheet1!A25:F45 | ||
| 6 | name | Vehicle Info | ||
| 7 | editable | B26:B35 | ||
| 8 | view | Sheet1!A50:F65 | ||
| 9 | name | Your Quote |
Users see a dropdown menu to switch between “Personal Info”, “Vehicle Info”, and “Your Quote”.
Hiding the View Navigation
If you want to control view switching yourself (via buttons or JavaScript), hide the built-in menu:
| A | B | C | |
|---|---|---|---|
| 1 | app | My App | |
| 2 | noViewNav | true |
Public Views
When building Team mode or Access Code apps, you often need some views to be publicly visible while others require authentication. Setting public to true on a view lets anyone see it without logging in, while other views remain protected.
| A | B | C | D | |
|---|---|---|---|---|
| 5 | view | Sheet1!A50:F65 | ||
| 6 | name | Scoreboard | ||
| 7 | public | true |
Consider a competition scoring app: judges log in with access codes to enter their scores on a private panel, while spectators watch results update on a public scoreboard—no login required.
Hidden Views
Sometimes you need NExS to process data without displaying it. Hidden views never appear in the UI but remain accessible through the JavaScript API, making them useful for storing configuration values, reading intermediate calculations, or building completely custom interfaces where your own HTML handles display while NExS provides the calculation engine.
| A | B | C | D | |
|---|---|---|---|---|
| 5 | view | Sheet2!A1:A10 | ||
| 6 | name | Settings | ||
| 7 | hidden | true |
With this configuration, the “Settings” view won’t appear in any navigation menu, but your JavaScript can still read from and write to its cells.
Layout Tips
Sizing for Your Audience
Think about where your app will be used. Desktop users benefit from larger views (800×600 pixels or bigger) that take advantage of screen real estate. Mobile users need narrow layouts—keep views under 350 pixels wide so they don’t require horizontal scrolling. To serve both from one view, split a wide range into narrower blocks with a multi-range view so the blocks stack on phones. For embedded widgets in website sidebars, compact views work best since they share space with other content.
Using Multiple Worksheets
Complex apps benefit from spreading content across multiple Excel worksheets. This keeps each sheet focused and makes your workbook easier to maintain:
| A | B | C | D | |
|---|---|---|---|---|
| 2 | view | Dashboard!A1:H20 | ||
| 3 | name | Dashboard | ||
| 4 | view | DataEntry!A1:F30 | ||
| 5 | name | Enter Data | ||
| 6 | view | Reports!A1:J25 | ||
| 7 | name | Reports |
Cells outside all views remain hidden—use them for intermediate calculations, lookup tables, or configuration.
Next Steps
- Inputs and Forms — Configure editable cells
- Deployment Modes — Control who can access your views
- UI Components — Add buttons for view navigation
