Server-Driven UI Schema Patterns

schema-design server-driven-ui

These patterns provide examples of server-driven ui and how you may structure your graph’s schema to encode and represent user-interface elements. A client would use a platform specific rendering engine to interpret the schema and generate interface components, for an example of a dynamic rendering client see TN32.

Device-based SDUI (with Enums)

Using a known device-type list can be useful in cases where a structured interface is provided through the graph on a per-device basis.

1
enum UIDeviceType {
2
  MOBILE
3
  WEB
4
  ROKU
5
  APPLETV
6
}
7

8
interface UIApp {}
9

10
type WebApp implements UIApp {}
11
type IOSApp implements UIApp {}
12
type AndroidApp implements UIApp {}
13
type AppleTVApp implements UIApp {}
14
type RokuApp implements UIApp {}
15

16
type Query {
17
  app(type: UIDeviceType! = WEB): UIApp!
18
}

Device-based SDUI (with Contracts)

A similar device-based SDUI with Contracts could be used to remove interface components from the schema which are unrelated to the target platform.

1
type UIApp {
2
  spotlight: UISpotlightComponent @tag(name: "DESKTOP")
3
  dashboard: UIDashboardComponent
4
  mobileMenu: UIMenuComponent @tag(name: "MOBILE")
5
  menu: UIMenuComponent @tag(name: "WEB")
6
}
7

8
type Query {
9
  app: UIApp!
10
}

SDUI Web Dashboard (static)

An example of a web application dashboard with a static structure encoded into the schema.

1
type AppLogo {
2
  url: String
3
  alt: String
4
}
5

6
type AppLink {
7
  icon: String
8
  label: String
9
  path: String
10
}
11

12
type AppUserMenu {
13
  user: User
14
}
15

16
type AppNavbar {
17
  logo: AppLogo
18
  items: [AppLink]
19
  user: AppUserMenu
20
}
21

22
type AppMobileMenu {
23
  items: [AppLink]
24
  user: AppUserMenu
25
}
26

27
type AppHomePage {
28
  recommended: [AppLink]
29
}
30

31
type WebApp {
32
  navbar: AppNavbar
33
  menu: AppMobileMenu
34
  home: AppHomePage
35
  settings: AppSettingsPage
36
  profile: AppProfilePage
37
}
38

39
type Query {
40
  app: WebApp!
41
}

SDUI Web Dashboard using Interfaces

This example uses interfaces to construct dynamic responses. Using this pattern the “experience” subgraph can dynamically return different interface components.

1
interface UIComponent {
2
  id: ID
3
}
4

5
type UILogo implements UIComponent {
6
  id: ID
7
  url: String
8
  alt: String
9
}
10

11
interface UINavbarItem implements UIComponent {
12
  id: ID
13
  label: String
14
  path: String
15
  icon: String
16
}
17

18
interface UINavbar implements UIComponent {
19
  id: ID
20
  logo: UILogo
21
  items: [UINavbarItem]
22
}
23

24
interface UIMenuItem implements UIComponent {
25
  id: ID
26
  label: String
27
  path: String
28
  icon: String
29
}
30

31
interface UIMenu implements UIComponent {
32
  id: ID
33
  logo: UILogo
34
  items: [UIMenuItem]
35
}
36

37
interface UISidebar implements UIComponent {
38
  id: ID
39
  title: String
40
  content: [UIComponent]
41
}
42

43
interface UILayout implements UIComponent {
44
  id: ID
45
  content: [UIComponent]
46
}
47

48
interface UIScreen implements UIComponent {
49
  id: ID
50
  current: UIPage
51
  navbar: UINavbar
52
  menu: UIMenu
53
  main: UILayout
54
  sidebar: UISidebar
55
}
56

57
enum UIPage {
58
  HOME
59
  DASHBOARD
60
  SETTINGS
61
}
62

63
type Query {
64
  app(page: UIPage!): UIScreen!
65
}

Home