Views

Available Views

View	Description	Requires ID
`invoices`	Invoice list	No
`invoice/new`	Create new invoice	No
`invoice`	View single invoice	Yes
`estimates`	Estimate list	No
`estimate/new`	Create new estimate	No
`estimate`	View single estimate	Yes
`credit-notes`	Credit note list	No
`credit-note/new`	Create new credit note	No
`credit-note`	View single credit note	Yes
`advance-invoices`	Advance invoice list	No
`advance-invoice/new`	Create new advance invoice	No
`advance-invoice`	View single advance invoice	Yes
`customers`	Customer list	No
`customer/new`	Create new customer	No
`customer`	View single customer	Yes

Settings Views

View	Description
`settings/company`	Company information
`settings/defaults`	Default document settings
`settings/numbering`	Invoice numbering configuration
`settings/tax`	Tax rules and rates
`settings/furs`	FURS fiscalization (Slovenia)
`settings/fina`	FINA fiscalization (Croatia)
`settings/templates`	PDF template selection

Export

View	Description
`export`	Document and tax report export

Opening List Views

List Viewstypescript

// Invoice list
si.open("invoices", { container: "#container" });

// Estimate list
si.open("estimates", { container: "#container" });

// Customer list
si.open("customers", { container: "#container" });

// Credit notes list
si.open("credit-notes", { container: "#container" });

Opening Creation Forms

Creation Formstypescript

// New invoice
si.open("invoice/new", { container: "#container" });

// New estimate
si.open("estimate/new", { container: "#container" });

// New customer
si.open("customer/new", { container: "#container" });

// New credit note
si.open("credit-note/new", { container: "#container" });

Opening Single Item Views

Single Item Viewstypescript

// View specific invoice
si.open("invoice", {
  container: "#container",
  id: "inv_123",
});

// View specific customer
si.open("customer", {
  container: "#container",
  id: "cust_456",
});

// View specific estimate
si.open("estimate", {
  container: "#container",
  id: "est_789",
});

Pre-filling Forms

Pre-fill creation forms with data:

Pre-fill Formstypescript

// Pre-fill new invoice with customer and items
si.open("invoice/new", {
  container: "#container",
  prefill: {
    client: {
      name: "Acme Corporation",
      email: "billing@acme.com",
      address: "123 Business St",
    },
    items: [
      { name: "Consulting", quantity: 10, price: 150 },
      { name: "Development", quantity: 20, price: 100 },
    ],
  },
});

// Pre-fill new customer
si.open("customer/new", {
  container: "#container",
  prefill: {
    name: "New Customer",
    email: "contact@customer.com",
    country: "US",
  },
});

Navigate between views without recreating the embed:

View Navigationtypescript

// Initial open
si.open("invoices", { container: "#container" });

// Navigate to create form
si.navigate("invoice/new");

// Navigate to view invoice (after creation)
si.navigate("invoice", { id: "inv_123" });

// Navigate back to list
si.navigate("invoices");

// Switch to customers
si.navigate("customers");

Opening Settings Views

Settings Viewstypescript

// Company settings
si.open("settings/company", { container: "#container" });

// Default document settings
si.open("settings/defaults", { container: "#container" });

// Invoice numbering
si.open("settings/numbering", { container: "#container" });

// Tax rules
si.open("settings/tax", { container: "#container" });

// PDF templates
si.open("settings/templates", { container: "#container" });

Opening Fiscalization Views

Fiscalization Viewstypescript

// FURS fiscalization settings (Slovenia)
si.open("settings/furs", { container: "#container" });

// FINA fiscalization settings (Croatia)
si.open("settings/fina", { container: "#container" });

Opening Export View

Export Viewtypescript

// Open document and tax report export
si.open("export", { container: "#container" });

Next Steps

Playground — Try all views interactively
Theming — Customize appearance
Events — Handle navigation events