-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dynamic form support for columns and dividers #17
Comments
Hey @hashitha , in loading from a string do you mean from XML? A horizontal divider is |
You are right |
You can find it here https://github.com/WPF-Forge/Forge.Forms/blob/master/Forge.Forms/src/Forge.Forms/FormBuilding/FormBuilder.cs#L289 It's quite limited now, for complex layouts we need to support some tags like |
I found the following in FormBuilder.cs
|
I will add an |
Thanks, I will give it a try when you are done. Adding the so something like the following will make it all in one line
|
I think we will need both inline type and columns. Columns we can define once at start something like
|
or better yet maybe
Or can we add a type grid with columns this way we can add the grid as a row anywhere |
Youre right grid as an element would work great.
This would make everything inside behave like a single item |
Yes, this would be great. Also, It would be great if we can add support to override margins in this case at least left and right margins |
Current layout system is flat and list based, where the DynamicForm is responsible for constructing the layout. This was designed with the list of class fields in mind, but it's terrible for richer custom layout and extensibility. I built a new layout system which relieves the form from layout calculation and instead delegates it to whatever ILayout the current node implements. ILayouts can contain other ILayouts, so now we're recursive! The logic is done for rows/cols, inline elements, stack panel and support for margins/alignment. What's left is to support recursive parsing inside XML.. The new API is completely internal and no visible change can be detected from outside the library, and even when it goes public it will be 100% optional and backwards compatible with no breaks. XML will include it implicitly so expect it within the next 24 hours. The syntax will be like this: <form>
<row>
<col width="1">
<text>...</text>
<input ... />
</col>
<col width="1" left="1">
<text>...</text>
<input ... />
<row>
<text>Inline text!!!</text>
<action .... />
<row>
</col>
</row>
</form> in the grid above the width is divided in 3 parts, where column 1 takes 1/3, 1/3 in the middle is empty and col2 takes the remaining 1/3. If a Another feature will be
This will add a 16 margin to the img. This means that you are not limited to customizing margin to grid columns only. I will post updates here |
New parser is live, we should test it for bugs. The features are as mentioned above. One breaking change is that actions are no longer inlined, so you have to group them in a |
When I have more time I will recreate one of the pictures you sent as a demo. I think the new layout is capable of handling those columns. Side note, is there support for multi line text fields? Do you need those in your project? |
Yes, I will need to support multiline for things like comments. |
I am currently working on one of the forms. I think something that is missing on the XML parsing is the dropdown list and radio buttons. |
Select is done: <?xml version="1.0" encoding="UTF-8"?>
<form>
<select from="type:Forge.Forms.Demo.Models.YesNo" name="NewsLetters" label="Do you want to receive weekly newsletters?" as="radiobuttons" nullable="true" />
<select from="{ContextBinding Doctors}" name="AppointedDoctor" label="Appointed doctor" />
<select from="type:Forge.Forms.Demo.Models.Gender?" name="Gender" label="Gender" />
<select name="CustomSelection" defaultValue="second" as="radiobuttons" label="Select something">
<option value="first">First Item</option>
<option value="second">Second Item</option>
<option value="third" name="Third Item" />
</select>
</form> Take note of the While testing ensure that you give your fields a
|
It's quite close! The material design makes it look a bit more spaced apart. If you are looking for something more serious you can use the default WPF theme or maybe metro. Not all controls are implemented there but we can adapt it in a short time. <?xml version="1.0" encoding="UTF-8"?>
<form>
<title>Ultrasound</title>
<row>
<col width="2">
<row>
<text>Patient</text>
<input />
</row>
</col>
<col>
<row>
<text>Dob</text>
<input />
</row>
</col>
</row>
<row>
<col width="2">
<row>
<text>Age</text>
<input />
</row>
</col>
<col>
<row>
<text>Date</text>
<input />
</row>
</col>
</row>
<row>
<text>Right Kidney</text>
<input />
</row>
<row>
<text>Left Kidney</text>
<input />
</row>
<row>
<col>
<row>
<col>
<text>Bladder</text>
</col>
<col>
<row>
<text>VOL</text>
<input />
</row>
</col>
</row>
<row>
<col>
<text>Post Mkt.</text>
</col>
<col>
<row>
<text>VOL</text>
<input />
</row>
</col>
</row>
<row>
<col>
<text>Prostate:</text>
</col>
<col>
<row>
<text>VOL</text>
<input />
</row>
</col>
</row>
<row>
<col>
<text>Ureteric Jets:</text>
</col>
<col>
<input />
</col>
</row>
<br />
<heading>Female</heading>
<row>
<col>
<text>Uterus</text>
</col>
<col>
<input />
</col>
</row>
<row>
<col>
<text>Endromet.</text>
</col>
<col>
<input />
</col>
</row>
<row>
<col>
<text>Rt. Ovary</text>
</col>
<col>
<input />
</col>
</row>
<row>
<col>
<text>Left Ovary</text>
</col>
<col>
<input />
</col>
</row>
</col>
<col>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/KidneyStructures_PioM.svg/590px-KidneyStructures_PioM.svg.png" />
</col>
</row>
<row>
<text>Comments</text>
<input />
</row>
</form> One thing to note; you can only have one input inside an inline grouping... that's because the ActionPanel supports only one child to fill the remaining space. In the future it must be made possible to divide remaining space between fill elements. Multi line text will be coming soon. |
@edongashi this is great! I have been using the material floating text boxes so it works fine. I am not sure if there is an issue with the datetime control or I am doing something wrong. It is going out of alignment if you remove the icon.
if you remove the icon i.e. |
I am not 100% sure if I understand your problem. If you add an icon to a control it will push it to the right. If you want to have your control pushed without an icon you can make its icon |
Ah now I noticed the problem. Hmm it must be some margin misalignment. I have to check if the text field and calendar field have the same margins paddings etc. |
Yea I just checked with icon=none, but that doesn't fix this. I think you might have to look into verticalcontentalighnment of the datetime control maybe |
Yes, it works well now. I think you might have to change the margin to -2 from -1
|
Done, let's just hope that this offset is not a function of FontSize, because different fields may move differently on font size change and it would be a mess. Ensuring that invariance is up to MD toolkit. But anyway, if you encounter any other problem let me know. |
This is all working well. |
Did you manage to add support for multi line textbox? |
Done, I liked the box better so I made that the default. We can probably add a property to indicate which style should be used. XML syntax is identitic to input, except you use textarea tag: <textarea name="..." label="..." .... /> |
Thanks. Yes, box style is good. I will give this a go. |
How do you set
|
as="comboboxeditable" |
A warning, if you make the combobox editable it will disregard option values. It will give provide the textual value as is. For example, in this demo: <form>
<select name="CustomSelection" as="comboboxeditable" label="Select something">
<option value="first">First Item</option>
<option value="second">Second Item</option>
<option value="third" name="Third Item" />
</select>
</form> when I select a value and serialize it to json I get this: {
"CustomSelection": "Second Item"
} instead of |
Yes, this is correct and the expected outcome for me. Whatever is in the textbox should be the returned value. |
Is it possible to add the divider in the dynamic form loading from a string?
Also, is it possible to have columns like this image when loading from a string
The text was updated successfully, but these errors were encountered: