Hello! Attached is a kind of neutered version of a form that I am working on WM3. I feel a little bad asking some of these questions because I understand that some of it may be just a lack of understanding for CSS and Javascript, but I thought it may still be a little better to learn about those languages in the context of WM.
Source of Income section: The data is currently set up as a grid and there are two changes I'd like to make of it.
1) I'd like to make it so that the grid is centered (horizontally) on the screen,
2) that all of the fields are centered at their position (horizontally), and
3) that there are borders around each field (like a table). Should I just make this section into a table somehow or can this all be done through the css?
4) At the bottom row I'd like to dynamically calculate the sum of all the rows above them. I believe that this would use javascript, but I just started learning that a yesterday and don't know how to refer to a field on the form.
Family Information
5. Is there any way that I can get rid of the blank row that always generates at the top? I'd like the table to get completely generated by user.
6. This one may be more difficult, but is there an elegant way to save the data in the 'insert' row if the user doesn't include insert? I expect a lot of users will just expect that bottom row to save with the rest.
That's all I got so far! I apologize if any of these questions are tedious or the like!
[hr][/hr]
Sorry, one more question that came to mind..
7. Could I count the number of rows in the user generated table (the family member) to dynamically calculate a field which displays how many family members there are?
Source of Income section: The data is currently set up as a grid and there are two changes I'd like to make of it.
1) I'd like to make it so that the grid is centered (horizontally) on the screen,
2) that all of the fields are centered at their position (horizontally), and
3) that there are borders around each field (like a table). Should I just make this section into a table somehow or can this all be done through the css?
4) At the bottom row I'd like to dynamically calculate the sum of all the rows above them. I believe that this would use javascript, but I just started learning that a yesterday and don't know how to refer to a field on the form.
Family Information
5. Is there any way that I can get rid of the blank row that always generates at the top? I'd like the table to get completely generated by user.
6. This one may be more difficult, but is there an elegant way to save the data in the 'insert' row if the user doesn't include insert? I expect a lot of users will just expect that bottom row to save with the rest.
That's all I got so far! I apologize if any of these questions are tedious or the like!
[hr][/hr]
Sorry, one more question that came to mind..
7. Could I count the number of rows in the user generated table (the family member) to dynamically calculate a field which displays how many family members there are?
Attachment
RE: Some general Webmaker Questions
I+?+?+?ve had a look at your project, and will try and answer your questions below:
1) Generally you can often horizontally centre block level components with CSS by setting their left and right margins to 'auto'. In your case adding 'margin-left:auto;margin-right:auto;' as a CSS Override to your 'layout_grid' group should give you the alignment you want.
2+3) For these types of layouts there are a number of different approaches that you could use for constructing them. For example do you use labels against the fields for the first column, or additional paragraph (or output) fields as you have done.
Depending on the approach taken the type of CSS required will differ, but sticking with the structure you have, I would look at adding some additional CSS like below to your custom CSS file. Hopefully this will give you the type of look and feel you are after.
/*Source of Income grid layout style overrides */ /*Remove the spacing on the grid table so that the borders will join up.*/ #layout_grid { border-spacing : 0; } /* Stop any labels from taking up space in the grid, as these are all empty in this scenario. This is needed because empty label container td elements will still be output to ensure correct alignment of the fields in a grid when some may or may not have labels. */ #layout_grid td.labelBackground { width : 0 !important; padding: 0 !important; border : none; } /* Centre the contents of the tds containing the text boxes. */ #layout_grid td.defaultBackground { text-align : center; } /* Add a border to every cell. */ #layout_grid td { border : 1px solid black; }I have only tried this in Firefox, so you may need to adjust it slightly depending on which browsers you need to support.
4) The resulting fields on the page will have the same id as the name given to them in the studio, which means you can access the fields in script easily by doing something like document.getElementById(<field name>). In your case however you are using the currency control which creates a dojo widget with slightly different HTML. For these types of controls you should use dijit.byId(<field name>) to get a reference to the dojo widget object.
So to perform your calculation you would need to do something like the following: (Unfortunately the dijit get value call seems to return NaN if the box is empty, so we switch that to 0)
function calculateIncomeTotals() { var incTotal = (dijit.byId('FatherInc').get('value') || 0) + (dijit.byId('MotherInc').get('value') || 0) + +?+?-? dijit.byId('TotalInc').set('value', incTotal); var saveTotal = (dijit.byId('FatherSave').get('value') || 0) + (dijit.byId('MotherSave').get('value') || 0) + +?+?-? dijit.byId('TotalSavings').set('value', saveTotal); dijit.byId(currency_textbox).set('value', (saveTotal + incTotal)); }You could then call this function with an onchange event from your fields.
This is one area where upgrading to a newer WebMaker version would definitely help. Newer versions include built in actions for doing calculations like this, but if you do need to use script, there are getFieldValue and setFieldValue helper functions that handle the differences between normal and dojo controls etc for you.
5) I think you will only see the blank row when previewing the page. When generating the preview for this page, WebMaker uses the contents of the +?+?++to_DataForm_page.xml+?+?+? document as the base data to display on the page.
As you add controls to the page, WebMaker adds a blank entry for them to this document to help with constructing the data bindings etc. As a result of this, when the preview is generated it sees one line of data for the table which then gets output. If you like you can edit this document to provide some data values to show in this row in the preview, or to remove it completely.
Regardless of whether you do this or not though, you should find that when you deploy and run the application you don+?+?+?t get an initial blank row in the table.
6) I guess you have got a couple of options here. You could check when the page is being submitted as to whether the insert row fields have any data in them, and if so alert the user and stop the submit.
Alternatively add a rule on the server side controller the page is submitted to (+?+?++DataFormDataReceiver+?+?+?) to check if these fields had a value, and if so automatically create a new element in the data structure for the table to contain them. You should be able to see these values within the eForm/Control/unbound section of the submitted message, and then use rule actions to create the needed structure from these if appropriate.
7) You should be able to determine how many rows are in the table by using the following editable table function:
document.getElementById('countField').value = hyf.editabletable.manageCount(document.getElementById('EditableTable'), 'get');Where 'EditableTable' is the name of the repeat element that creates the table, and 'countField' is the name of a text box on the page to place the count into. (If you were using an output field to show the count you would need to set the innerHTML property rather than the value.)
In order to keep the value up to date, you could define a 'change_function' for the editable table (see http://www.hyfinity.com/node/44 so that you will get notified whenever a row is added or removed from the table. Inside this function you would just use the above line to update the displayed count.
I hope this information helps. Please let me know if you have any further questions.
As an aside, do you have any plans to update to a newer WebMaker version? :) Versions 5 and 6 provide a much better studio environment than you get with version 3!
Regards,
Gerard
RE: Some general Webmaker Questions
I would absolutely love to upgrade to a newer version of webmaker. What I've heard from the powers on high is that our test server runs WM5 but the stability of that server is so poor that we never actually get to test it. That's what I'm told at least! I originally trained myself on the free WM5 that was on this site, but once I got my license had to sink back down.
RE: Some general Webmaker Questions
When you mention stability issues with your WM5 test server do you know any more details on this? Is this an issue with the WebMaker part (in which case we would definitely want to help investigate and resolve this) or more generally with the BizFlow configuration or server setup?
Regards,
Gerard
RE: Some general Webmaker Questions
Hey Gerard, I'd like to to switch the form control from currency text box to an output that is still formatted to have the form of currency ($). Can you describe what type of modifications I'd have to make?
RE: Some general Webmaker Questions
Hey Gerard, I'd like to to switch the form control from currency text box to an output that is still formatted to have the form of currency ($). Can you describe what type of modifications I'd have to make?
RE: Some general Webmaker Questions
I think the main thing you would need to change would be the script that gets or sets the value from the field. Because you are using v3 you will need to handle the differences between the control types yourself, so rather than using the 'value' property or the dijit set method, the easiest option is probably just to use the innerHTML property instead.
Assuming you are talking about changing the 'total' fields to output fields, then you could probably just get away with changing your code to something like:
document.getElementById('TotalInc').innerHTML = '$' + incTotal;If you are looking at getting the value out of the field, then you would also need to do some string processing to remove the $ signs, etc before doing anything with the actual number value.
I hope this helps you get going with this. Let me know if you have further questions.
Regards,
Gerard