payload: {"action":"created","issue":{"url":"https://api.github.com/repos/SAP/ui5-webcomponents/issues/273","repository_url":"https://api.github.com/repos/SAP/ui5-webcomponents","labels_url":"https://api.github.com/repos/SAP/ui5-webcomponents/issues/273/labels{/name}","comments_url":"https://api.github.com/repos/SAP/ui5-webcomponents/issues/273/comments","events_url":"https://api.github.com/repos/SAP/ui5-webcomponents/issues/273/events","html_url":"https://github.com/SAP/ui5-webcomponents/issues/273","id":426346979,"node_id":"MDU6SXNzdWU0MjYzNDY5Nzk=","number":273,"title":"HTML Form support","user":{"login":"samba2","id":1508184,"node_id":"MDQ6VXNlcjE1MDgxODQ=","avatar_url":"https://avatars3.githubusercontent.com/u/1508184?v=4","gravatar_id":"","url":"https://api.github.com/users/samba2","html_url":"https://github.com/samba2","followers_url":"https://api.github.com/users/samba2/followers","following_url":"https://api.github.com/users/samba2/following{/other_user}","gists_url":"https://api.github.com/users/samba2/gists{/gist_id}","starred_url":"https://api.github.com/users/samba2/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samba2/subscriptions","organizations_url":"https://api.github.com/users/samba2/orgs","repos_url":"https://api.github.com/users/samba2/repos","events_url":"https://api.github.com/users/samba2/events{/privacy}","received_events_url":"https://api.github.com/users/samba2/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2019-03-28T07:52:51Z","updated_at":"2019-03-28T11:27:13Z","closed_at":null,"author_association":"NONE","body":"**A little feedback**\r\nI am impressed by UI5 Web Components and advertise them heavily as \"the future is here\" in my work environment. Keep up the good work!\r\n\r\n**My idea/ suggestion**\r\nAt work we use two different styles of web apps. For highly interactive applications we build SPAs (currently with OpenUI5 or Angular). For small, more workflow based applications we use classic server side rendering as you could do it e.g. with _express_ in node.js. The latter style is well described by the ROCA pattern: https://roca-style.org/\r\n\r\nUsing UI5 Web Components for SPAs is straightforward and very well demonstrated by the three example Todo apps (good job!). However, we'd love to use at least a subset of UI5 Web Components also for server-side generated pages.\r\n\r\nWhen working with server-side generated pages you exchange data between client and server using classic HTML forms since most of the modern action-based server frameworks support automatic data binding for form data. \r\n\r\nAfter doing some reading I understand that a Web Component need to explicitly support HTML forms.  This is usually done by a more or less [ugly hack using a hidden form element](https://stackoverflow.com/questions/38623176/how-can-i-create-a-web-component-that-acts-like-a-form-element).\r\n\r\nFrom an API perspective I could imagine to enable HTML form support explicitly:\r\n```html\r\n<form>\r\n  Name: <ui5-input value=\"Input\" insideForm=\"true\"></ui5-input>\r\n  <ui5-button type=\"Default\" insideForm=\"true\">Submit</ui5-button>\r\n</form>\r\n```\r\nMy attribute name `insideForm` is of course up for discussion ;-)\r\n\r\nWhat do you think?"},"comment":{"url":"https://api.github.com/repos/SAP/ui5-webcomponents/issues/comments/477556047","html_url":"https://github.com/SAP/ui5-webcomponents/issues/273#issuecomment-477556047","issue_url":"https://api.github.com/repos/SAP/ui5-webcomponents/issues/273","id":477556047,"node_id":"MDEyOklzc3VlQ29tbWVudDQ3NzU1NjA0Nw==","user":{"login":"pskelin","id":11073377,"node_id":"MDQ6VXNlcjExMDczMzc3","avatar_url":"https://avatars0.githubusercontent.com/u/11073377?v=4","gravatar_id":"","url":"https://api.github.com/users/pskelin","html_url":"https://github.com/pskelin","followers_url":"https://api.github.com/users/pskelin/followers","following_url":"https://api.github.com/users/pskelin/following{/other_user}","gists_url":"https://api.github.com/users/pskelin/gists{/gist_id}","starred_url":"https://api.github.com/users/pskelin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pskelin/subscriptions","organizations_url":"https://api.github.com/users/pskelin/orgs","repos_url":"https://api.github.com/users/pskelin/repos","events_url":"https://api.github.com/users/pskelin/events{/privacy}","received_events_url":"https://api.github.com/users/pskelin/received_events","type":"User","site_admin":false},"created_at":"2019-03-28T11:27:13Z","updated_at":"2019-03-28T11:27:13Z","author_association":"CONTRIBUTOR","body":"Hi @samba2,\r\nthanks for the encouraging words and also for sharing your thoughts.\r\n\r\nThis definitely sounds like a good idea. We have previously discussed usage of webcomponents inside forms, but always suggested the app developers create the hidden element themselves and keep it in sync.\r\n\r\nWhat was stopping us from creating the hidden element in the light dom was the fact that if a framework (like react) is managing the light dom, we should not be modifying it from the components. Seeing your use case however, it makes sense that whenever someone wants to use the components in a form, a UI framework is not involved.\r\n\r\nHow does such an API sound to you?\r\n```html\r\n<form>\r\n  <ui5-input value=\"Input\" name=\"first-name\"></ui5-input>\r\n<form>\r\n```\r\n\r\nsetting a `name` attribute is the equivalent of your proposal `insideForm=\"true\"` and indicates to the component that a hidden input needs to be added and kept in sync. The created dom will look like this afterwards:\r\n\r\n```html\r\n<form>\r\n  <ui5-input value=\"Input\" name=\"first-name\">\r\n    <input data-autogenerated hidden value=\"Input\" name=\"first-name\"/>\r\n  </ui5-input>\r\n<form>\r\n```\r\n\r\nThe native input will be created only if you pass a name attribute to the ui5-input and it will have the same name and the value will be kept in sync (the ui5-input will render a different input in its shadowdom, the data-autogenerated one is only there for the form). The intention then is that apps using frameworks don't set the name attribute, but instead bind to the value and submit forms programatically.\r\n\r\nWe also have to think about the submit button. Not sure how this can work with an additional button and firing an event for it. We'll give it a try but I assume from the example you also need the ui5-button for the form submit?\r\n\r\nDoes that sound like it will solve your case? We will consider some other use cases as well and keep the issue open, so feel free to share any additional ideas."}}
other: {"actor":{"display_login":"pskelin"}}