Name the view and choose the output used by the application.
let appModeStates =
[ FixtureState.create "Ready" (fixtureHref "ready")
FixtureState.create "Validation" (fixtureHref "validation") ]
|> List.mapi (fun index state ->
if (fixtureState = "ready" && index = 0) || (fixtureState = "validation" && index = 1) then FixtureState.current state
else state)
let appModeBrowserFixture =
Browser.create (productView "app-mode-browser" fixtureState)
|> Browser.withAddress (publicUrl (fixtureHref fixtureState))
|> Fixture.browser "view-studio-browser" "Create a view" (fixtureHref fixtureState)
|> Fixture.withStates appModeStates
let appModeFixture = appModeBrowserFixture |> Fixture.render
Phone fixture
Use the same viewer contract for a Phone fixture; the viewer controls the surface while the product owns screen content.
Phone fixture
9:415G · 100%
View StudioFSNEW VIEW
Render your first component
Give the view a name before choosing its output.
let appModePhoneConfig =
Phone.create (
div {
_class "docs-app-mode-phone-screen"
header { _class "docs-app-mode-phone-header"; strong { "View Studio" }; span { "FS" } }
main {
_class "docs-app-mode-phone-content"
small { "NEW VIEW" }
h3 { "Render your first component" }
p { "Give the view a name before choosing its output." }
label { _for "app-mode-phone-view-name"; "View name" }
input { _id "app-mode-phone-view-name"; _value "accountSummary" }
button { _type "button"; _class "docs-product-primary"; "Create view" }
}
})
|> Fixture.phone "view-studio-phone" "Create a view on phone" (fixtureHref fixtureState)
let appModePhoneFixture = appModePhoneConfig |> Fixture.render
Workflow fixture
Fixture supplies authored previous and next destinations independently from review states. Each destination renders a real server-owned workflow step on this route.