locked
Create a dynamic Win Control from JavaScript? RRS feed

  • Question

  • I would like to create a WinJS.UI.HubSection winControl dynamically in JavaScript. I would like to do this because the number of HubSections I'd like to create is unknown. Within that dynamic hubsection, I would like to create a custom winControl.

    How do I go about doing this using JavaScript?

    Monday, March 21, 2016 11:04 PM

Answers

  • Hello Jaxim,

    Please see: Basics: Imperative vs Declarative

    We can also create WinJS controls imperatively in the JavaScript file. Imperative constructors take two arguments, both optional. The first is the DOM element on which to construct the control. The second argument is an object representing the configuration of the control, formatted using the same syntax for we used with data-win-options. 

    >> Within that dynamic hubsection, I would like to create a custom winControl.

    For that you will need to define custom class. 

    Please see: https://blogs.msdn.microsoft.com/windowsappdev/2012/10/11/building-a-custom-control-using-the-windows-library-for-javascript-winjs/

    With Regards,

    Krunal Parekh



    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Tuesday, March 29, 2016 3:53 AM
    • Marked as answer by Krunal Parekh Thursday, March 31, 2016 9:55 AM
    Wednesday, March 23, 2016 7:00 AM
  • I ended solving this by doing the following in my JavaScript code:

                           

    var hub = document.querySelector(".hub").winControl;
    var hubSection = new WinJS.UI.HubSection();
    hubSection.header = "TEST HEADER";
    hubSection.onheaderinvoked = _oThis.headerNavigateHandler; //What happens when the header is invoked
    var hubSection = new WinJS.UI.HubSection();
    
    var contentList = new HubApps_SectionControls.SectionThumbControl(hubSection.contentElement, oContentParams);
    //contentList variable is the custom winControl I created. 
    //I add the winControl to the HubSection's contentElement
    //oContentParams is an object with all of the parameters to set up the custom winControl
    
    hub.sections.push(hubSection);



                           

    • Edited by Jaxim Thursday, March 24, 2016 4:40 PM fixed typo
    • Proposed as answer by Krunal Parekh Tuesday, March 29, 2016 3:53 AM
    • Marked as answer by Krunal Parekh Thursday, March 31, 2016 9:55 AM
    Thursday, March 24, 2016 4:39 PM

All replies

  • Hello Jaxim,

    Please see: Basics: Imperative vs Declarative

    We can also create WinJS controls imperatively in the JavaScript file. Imperative constructors take two arguments, both optional. The first is the DOM element on which to construct the control. The second argument is an object representing the configuration of the control, formatted using the same syntax for we used with data-win-options. 

    >> Within that dynamic hubsection, I would like to create a custom winControl.

    For that you will need to define custom class. 

    Please see: https://blogs.msdn.microsoft.com/windowsappdev/2012/10/11/building-a-custom-control-using-the-windows-library-for-javascript-winjs/

    With Regards,

    Krunal Parekh



    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Tuesday, March 29, 2016 3:53 AM
    • Marked as answer by Krunal Parekh Thursday, March 31, 2016 9:55 AM
    Wednesday, March 23, 2016 7:00 AM
  • I ended solving this by doing the following in my JavaScript code:

                           

    var hub = document.querySelector(".hub").winControl;
    var hubSection = new WinJS.UI.HubSection();
    hubSection.header = "TEST HEADER";
    hubSection.onheaderinvoked = _oThis.headerNavigateHandler; //What happens when the header is invoked
    var hubSection = new WinJS.UI.HubSection();
    
    var contentList = new HubApps_SectionControls.SectionThumbControl(hubSection.contentElement, oContentParams);
    //contentList variable is the custom winControl I created. 
    //I add the winControl to the HubSection's contentElement
    //oContentParams is an object with all of the parameters to set up the custom winControl
    
    hub.sections.push(hubSection);



                           

    • Edited by Jaxim Thursday, March 24, 2016 4:40 PM fixed typo
    • Proposed as answer by Krunal Parekh Tuesday, March 29, 2016 3:53 AM
    • Marked as answer by Krunal Parekh Thursday, March 31, 2016 9:55 AM
    Thursday, March 24, 2016 4:39 PM