ビューを動的に変更する

public class ListViewDemo {
  public Map<String, List<gcss.Common.ViewItem>> viewItemsWithFolder{set;get;}
  public String updatedValue {get; set;}
  public String folderSelected{set;get;}
  public String viewSelected{set;get;}
  public List<SelectOption> folderItems{set;get;}
  public List<SelectOption> viewItems{set;get;}
    
  public ListViewDemo(){
    //フォルダーIDとフォルダー名を指定する
    Map<String, String> folderMap = new Map<String, String>{'a0E5g000004SZc5EAG'=> '予実管理', 'a0E5g000008BOsWEAW' => '商品'}; 
    List<String>folderIds=new List<String>(folderMap.keySet());
    //指定されたフォルダーIDと関連するビューリストの対応付けを取得する
    viewItemsWithFolder = gcss.Common.getFolderViewList(folderIds);
    //フォルダー選択リストに表示するリスト項目を取得する
    folderItems = new List<SelectOption>();
    for (String folderId: viewItemsWithFolder.keySet()) {
      folderItems.add(new SelectOption(folderId, folderMap.get(folderId)));
    }

    viewItems = new List<SelectOption>();         
    List<gcss.Common.ViewItem> views=viewItemsWithFolder.get(folderItems[0].getValue());
      if (views != null){
        for(gcss.Common.ViewItem viewItem : views) {
        viewItems.add(new SelectOption(viewItem.id, viewItem.name));
        }
      }
    updatedValue=folderItems[0].getValue();
  }
  public void updateViewList(){
    //ビュー選択リストに表示するリスト項目を取得する
    viewItems = new List<SelectOption>();   
    List<gcss.Common.ViewItem> views=viewItemsWithFolder.get(folderSelected);
    if (views != null){
      for(gcss.Common.ViewItem viewItem : views) {
        viewItems.add(new SelectOption(viewItem.id, viewItem.name));
      }
    }
  }    
}

<apex:page controller="ListViewDemo" id="pg">
  <div style="height:500px;width:100%;">
    <apex:form styleClass="slds-m-vertical_medium" id="form">
      <!-- フォルダーの選択リストを作成する -->
      <apex:outputLabel value="フォルダー: "/>
      <apex:selectList id="folderList" value="{!folderSelected}" size="1">
        <apex:selectOptions value="{!folderItems}"/>
        <apex:actionSupport event="onchange" action="{!updateViewList}" reRender="viewList,raysheet" oncomplete="reloadViewListCompleted()"/>
      </apex:selectList>
      <!-- ビューの選択リストを作成する -->
      <apex:outputLabel value="ビュー: "/>  
      <apex:selectList id="viewList" value="{!viewSelected}" onchange="showView(this.value);" size="1">
        <apex:selectOptions value="{!viewItems}"/>
      </apex:selectList>
    </apex:form>
      
    <!-- RaySheetコンポーネントを読み込む -->
    <gcss:Spreadsheet id="raysheet" FolderId="{!updatedValue}"/>
    
    <!-- RaySheetのJavaScript APIのgcbgインターフェースをコールする -->
    <script type="text/javascript">
      var reloadViewListCompleted = function(){
          var viewId =document.getElementById("pg:form:viewList").value;
          showView(viewId);
      }
      var showView = function (viewId) {
        var folderId =document.getElementById("pg:form:folderList").value;
        gcbg.getRaySheet().showFolderView(folderId,viewId);
      }     
    </script>  
  </div>
</apex:page>