{"id":41,"date":"2026-02-14T20:06:04","date_gmt":"2026-02-14T20:06:04","guid":{"rendered":"https:\/\/ngonar.com\/?p=41"},"modified":"2026-02-14T20:06:04","modified_gmt":"2026-02-14T20:06:04","slug":"swift-ui-view-routing","status":"publish","type":"post","link":"https:\/\/ngonar.com\/?p=41","title":{"rendered":"Swift UI View Routing"},"content":{"rendered":"\n

When your application gets too complicated, getting too many Views to navigate.
It is simpler to route the Views in a single JSON file.
This can also be applied from a JSON file, or from JSON API response.<\/p>\n\n\n\n

The idea is based on these points :<\/p>\n\n\n\n

    \n
  1. The buttons visibility is based on JSON API response, which is supposed to be dynamically set by the ACL \/ RBAC on the backend.<\/li>\n\n\n\n
  2. The route of the buttons is mapped by an ID<\/li>\n\n\n\n
  3. The ID is representing a View<\/li>\n<\/ol>\n\n\n\n

    Ok, now let\u2019s go the code.<\/p>\n\n\n\n

    First, you have to create an enum that represents your view<\/p>\n\n\n\n

    enum AbenkRouting: Int, CaseIterable {\n    case view1\n    case view2\n   \n    var destination: AnyView {\n         switch self {\n         case .view1: return AnyView(View1())\n         case .view2: return AnyView(View2())\n         \n         }\n     }\n}<\/code><\/pre>\n\n\n\n
    Second let\u2019s add a map of our designated view, just right under the enum view code.<\/p>\n\n\n\n
    let abenk_map = [\n    \"100\": AbenkRouting.view1,\n    \"101\": AbenkRouting.view2\n]\n<\/code><\/pre>\n\n\n\n
    Let\u2019s say you have the API for view access as follow :<\/p>\n\n\n\n
    {\"rc\":\"00\",\n \"message\":\"Success\",\n \"data\":\n      {\"user\":\"iwan\",\n       \"store\":\"Abenk Pamulank\",\n       \"division\":\"User\",\n       \"menu\":\n           [\n                 {\n                     \"MenuCategory\":{\"name\":\"Home\"},\n                     \"UserMenu\":{\n                         \"label\":\"Menu 1\",\n                         \"menu_obj\":\"100\",\n                         \"menu_category_id\":\"1\", \n                         \"logo\":\"app\"}\n                 },\n                 {\n                     \"MenuCategory\":{\"name\":\"Home\"},\n                     \"UserMenu\":{\n                         \"label\":\"Menu 2\",\n                         \"menu_obj\":\"101\",\n                         \"menu_category_id\":\"2\", \n                         \"logo\":\"app\"}\n                 }\n            ]\n      }\n}<\/code><\/pre>\n\n\n\n
    Don\u2019t forget to decode the JSON into an object. And then add this line on the View that the menus will be shown<\/p>\n\n\n\n
    ForEach (menus) { menu in\n                                \n          NavigationLink(destination: abenk_map[menu.obj]?.destination) {\n              VStack(alignment: .leading) {\n                  ZStack(alignment: .top) {\n                      Image(systemName: menu.logo)\n                            .resizable()\n                            .scaledToFit()\n                            .symbolRenderingMode(.hierarchical)\n                            .ignoresSafeArea(.container, edges: .bottom)\n                            .cornerRadius(8)\n                            .frame(width: UIScreen.main.bounds.size.width\/5,\n                                   height: UIScreen.main.bounds.size.width\/5\n                                   )\n                  }\n                  Text(menu.name)\n               }\n          }.foregroundColor(.black)                         \n}<\/code><\/pre>\n\n\n\n
    Voila, the menus now routed based on the API. so there\u2019s no need to write the navigation link repeatedly anymore.<\/p>\n\n\n\n
    We are using default system icon here. but you can use your own image asset. just set it up on the API response ( it\u2019s the logo element here )<\/p>\n\n\n\n
    This is applicable to the next View which is dynamically related to ACL \/ RBAC on the backend.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Checkout the code on my github\u00a0<\/p>\n\n\n\n
    https:\/\/github.com\/ngonar\/NgonarRouting.git<\/a><\/p>\n\n\n\n
    <\/p>\n\n\n\n
    Salam,
    IS<\/p>\n","protected":false},"excerpt":{"rendered":"
    When your application gets too complicated, getting too many Views to navigate.It is simpler to route the Views in a single JSON file.This can also be applied from a JSON file, or from JSON API response. The idea is based on these points : Ok, now let\u2019s go the code. First, you have to create […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-41","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/ngonar.com\/index.php?rest_route=\/wp\/v2\/posts\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ngonar.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ngonar.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ngonar.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ngonar.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=41"}],"version-history":[{"count":1,"href":"https:\/\/ngonar.com\/index.php?rest_route=\/wp\/v2\/posts\/41\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/ngonar.com\/index.php?rest_route=\/wp\/v2\/posts\/41\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/ngonar.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ngonar.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ngonar.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}