Server-Driven UI Schema Design
Use enums, contracts, and interfaces to implement SDUI
💡 TIP
If you're an enterprise customer looking for more material on this topic, try the Enterprise best practices: Schema design course on Odyssey.
Not an enterprise customer? Learn about GraphOS for Enterprise.
These patterns provide examples of server-driven UI (SDUI) and how to structure your graph's schema to encode and represent UI elements. Clients can then use platform-specific rendering engines to interpret the schema and generate UI components.
💡 TIP
For more information on SDUI in general, see Server-driven UI basics.
Device-based SDUI with enums
Different devices (for example, mobile, web, Roku, Apple TV) may require different UI layouts or components. You can use enums for device type lists to declare which UI type to retrieve.
enum UIDeviceType {MOBILEWEBROKUAPPLETV}interface UIApp {}type WebApp implements UIApp {}type IOSApp implements UIApp {}type AndroidApp implements UIApp {}type AppleTVApp implements UIApp {}type RokuApp implements UIApp {}type Query {app(type: UIDeviceType! = WEB): UIApp!}
In this example, the UIDeviceType
enum lets you specify the type of device you want to retrieve the UIApp
for.
Device-based SDUI with contracts
You can use a similar device-based SDUI with contracts to remove UI components that are unrelated to the target platform from your schema.
type UIApp {spotlight: UISpotlightComponent @tag(name: "DESKTOP")dashboard: UIDashboardComponentmobileMenu: UIMenuComponent @tag(name: "MOBILE")menu: UIMenuComponent @tag(name: "WEB")}type Query {app: UIApp!}
💡 TIP
Read more on contracts usage patterns.
SDUI web dashboard
The following example shows a schema with a static structure that clients can use to create a web dashboard UI.
type AppLogo {url: Stringalt: String}type AppLink {icon: Stringlabel: Stringpath: String}type AppUserMenu {user: User}type AppNavbar {logo: AppLogoitems: [AppLink]user: AppUserMenu}type AppMobileMenu {items: [AppLink]user: AppUserMenu}type AppHomePage {recommended: [AppLink]}type WebApp {navbar: AppNavbarmenu: AppMobileMenuhome: AppHomePagesettings: AppSettingsPageprofile: AppProfilePage}type Query {app: WebApp!}
SDUI web dashboard using interfaces
The example schema below is also for a web dashboard UI, but it uses interfaces to construct dynamic responses for the UI. By using interfaces, an "experience" subgraph can dynamically return different UI components.
interface UIComponent {id: ID}type UILogo implements UIComponent {id: IDurl: Stringalt: String}interface UINavbarItem implements UIComponent {id: IDlabel: Stringpath: Stringicon: String}interface UINavbar implements UIComponent {id: IDlogo: UILogoitems: [UINavbarItem]}interface UIMenuItem implements UIComponent {id: IDlabel: Stringpath: Stringicon: String}interface UIMenu implements UIComponent {id: IDlogo: UILogoitems: [UIMenuItem]}interface UISidebar implements UIComponent {id: IDtitle: Stringcontent: [UIComponent]}interface UILayout implements UIComponent {id: IDcontent: [UIComponent]}interface UIScreen implements UIComponent {id: IDcurrent: UIPagenavbar: UINavbarmenu: UIMenumain: UILayoutsidebar: UISidebar}enum UIPage {HOMEDASHBOARDSETTINGS}type Query {app(page: UIPage!): UIScreen!}