Topic
  • 12 replies
  • Latest Post - ‏2014-08-06T18:35:06Z by mburati
DivyaN23
DivyaN23
72 Posts

Pinned topic HTML Data Layout

‏2014-05-08T16:02:30Z |

Hello,

I have a requirement to create a timetable as in the screenshot. With Data Column Modifier / RDD we get the data in columns but is it possible to alter these styles or any other best approach for this please.

Thanks for your time!

Attachments

Updated on 2014-08-06T13:54:04Z at 2014-08-06T13:54:04Z by DivyaN23
  • mburati
    mburati
    2575 Posts

    Re: How can the DCM Style be altered

    ‏2014-05-08T17:30:52Z  

    The best practice for turning tabular data (tables with repeated rows/columns) into lists with WEF is via the Data Layout builder and either an ootb or custom Data layout template.

    Here's more info on using Data Layout to turn your tabular result data into lists (and then you can use whatever CSS you want to style them the way you want).

    http://www-10.lotus.com/ldd/pfwiki.nsf/dx/Transforming_Tables_into_Lists_using_the_Data_Layout_Builder?OpenDocument&sa=true

    http://www-10.lotus.com/ldd/pfwiki.nsf/dx/List_Layout_UI_Patterns_

    http://www-10.lotus.com/ldd/pfwiki.nsf/dx/Using_the_new_Feature_Pack_8_Data_Layouts?OpenDocument&sa=true

     

    I hope that info helps,
    ..Mike Burati 
    The postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.
    Updated on 2014-05-08T17:31:22Z at 2014-05-08T17:31:22Z by mburati
  • DivyaN23
    DivyaN23
    72 Posts

    Re: How can the DCM Style be altered

    ‏2014-05-09T15:14:13Z  
    • mburati
    • ‏2014-05-08T17:30:52Z

    The best practice for turning tabular data (tables with repeated rows/columns) into lists with WEF is via the Data Layout builder and either an ootb or custom Data layout template.

    Here's more info on using Data Layout to turn your tabular result data into lists (and then you can use whatever CSS you want to style them the way you want).

    http://www-10.lotus.com/ldd/pfwiki.nsf/dx/Transforming_Tables_into_Lists_using_the_Data_Layout_Builder?OpenDocument&sa=true

    http://www-10.lotus.com/ldd/pfwiki.nsf/dx/List_Layout_UI_Patterns_

    http://www-10.lotus.com/ldd/pfwiki.nsf/dx/Using_the_new_Feature_Pack_8_Data_Layouts?OpenDocument&sa=true

     

    I hope that info helps,
    ..Mike Burati 
    The postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.

    Thanks for the reply. I tried to add style as below to the factory/data_layout_templates/base_template_styles.css but I can't find it under the style column in Data layout builder(I have deployed the application as well).

    /* adds a character / */
    .wpfSlashAfter:after {
        content: '\00a0-\00a0 ';
    }

    .wpfSlashAfter {
        }

    Also for my requirement for a particular date I have repeated events (pls refere to scrrenshot in my first msg). I am using Multi-line list but the date repeats on each event for a particular day as in the screenshot below. Not sure how to achieve my requirement.

     

    Attachments

  • DivyaN23
    DivyaN23
    72 Posts

    Re: How can the DCM Style be altered

    ‏2014-05-12T10:36:03Z  
    • DivyaN23
    • ‏2014-05-09T15:14:13Z

    Thanks for the reply. I tried to add style as below to the factory/data_layout_templates/base_template_styles.css but I can't find it under the style column in Data layout builder(I have deployed the application as well).

    /* adds a character / */
    .wpfSlashAfter:after {
        content: '\00a0-\00a0 ';
    }

    .wpfSlashAfter {
        }

    Also for my requirement for a particular date I have repeated events (pls refere to scrrenshot in my first msg). I am using Multi-line list but the date repeats on each event for a particular day as in the screenshot below. Not sure how to achieve my requirement.

     

    I am able to see the styles (wpfSlashAfter) I added in DL (after restart) but my core requirement is to have the events listed for each day, so if there  are 3 events for a particular day, under the date the 3 events should be shown (so date is common for the 3 events, whereas for Data layout the Date repeats for each of the event).

    Any idea how to achieve this please with Data Layout or is it not possible?

    Thanks for your time!

    Updated on 2014-05-12T10:36:38Z at 2014-05-12T10:36:38Z by DivyaN23
  • gsager
    gsager
    139 Posts

    Re: How can the DCM Style be altered

    ‏2014-05-12T10:48:14Z  
    • DivyaN23
    • ‏2014-05-09T15:14:13Z

    Thanks for the reply. I tried to add style as below to the factory/data_layout_templates/base_template_styles.css but I can't find it under the style column in Data layout builder(I have deployed the application as well).

    /* adds a character / */
    .wpfSlashAfter:after {
        content: '\00a0-\00a0 ';
    }

    .wpfSlashAfter {
        }

    Also for my requirement for a particular date I have repeated events (pls refere to scrrenshot in my first msg). I am using Multi-line list but the date repeats on each event for a particular day as in the screenshot below. Not sure how to achieve my requirement.

     

    So you shouldn't modify any of the factory files, it will cause an issue if you have to upgrade the project the changes you make will be overwritten.  The names in the base file are used to create the pick list for the styles and are cached after they have been loaded.  But the name of the style or the style itself can be typed into the input, the drop down input is editable.  So you can just type the class name or the style into the input. 

    To get your list so that it only has a single heading  you might look at this post using the Data Column Modifier

    https://www.ibm.com/developerworks/community/forums/html/topic?id=77777777-0000-0000-0000-000014537714

     

  • DivyaN23
    DivyaN23
    72 Posts

    Re: How can the DCM Style be altered

    ‏2014-05-12T16:13:31Z  
    • gsager
    • ‏2014-05-12T10:48:14Z

    So you shouldn't modify any of the factory files, it will cause an issue if you have to upgrade the project the changes you make will be overwritten.  The names in the base file are used to create the pick list for the styles and are cached after they have been loaded.  But the name of the style or the style itself can be typed into the input, the drop down input is editable.  So you can just type the class name or the style into the input. 

    To get your list so that it only has a single heading  you might look at this post using the Data Column Modifier

    https://www.ibm.com/developerworks/community/forums/html/topic?id=77777777-0000-0000-0000-000014537714

     

    I have used the Transform Group to group by date, but I am not pretty much sure how to show that in the UI using the Data Layout. Any ideas please?

    Attachments

  • gsager
    gsager
    139 Posts

    Re: How can the DCM Style be altered

    ‏2014-05-13T09:32:14Z  
    • DivyaN23
    • ‏2014-05-12T16:13:31Z

    I have used the Transform Group to group by date, but I am not pretty much sure how to show that in the UI using the Data Layout. Any ideas please?

    If you attached a version that actually can run, I might be able to help figure out what your page looks like and how you could change it.  But with just the pictures and the models contained I am not sure what the best way to produce the ui you want.

  • DivyaN23
    DivyaN23
    72 Posts

    Re: How can the DCM Style be altered

    ‏2014-05-13T10:15:15Z  
    • gsager
    • ‏2014-05-13T09:32:14Z

    If you attached a version that actually can run, I might be able to help figure out what your page looks like and how you could change it.  But with just the pictures and the models contained I am not sure what the best way to produce the ui you want.

    PFA mocked up sample and description doc. Please let me know if there are any queries. Highly appreciate your help.

    Attachments

  • gsager
    gsager
    139 Posts

    Re: How can the DCM Style be altered

    ‏2014-05-13T12:08:27Z  
    • DivyaN23
    • ‏2014-05-13T10:15:15Z

    PFA mocked up sample and description doc. Please let me know if there are any queries. Highly appreciate your help.

    So here is an example of adding an html layout builder to the page.  I have 2 versions one using tables page1.html  and the second using divs page1div.html.  These are just quick versions I am sure with the correct styling you can get what you want.  Make sure you leave the HTMLWrappers in the html this is how Page automation find the different sections for repeating the data.

    Attachments

  • DivyaN23
    DivyaN23
    72 Posts

    Re: How can the DCM Style be altered

    ‏2014-05-14T14:16:27Z  
    • gsager
    • ‏2014-05-13T12:08:27Z

    So here is an example of adding an html layout builder to the page.  I have 2 versions one using tables page1.html  and the second using divs page1div.html.  These are just quick versions I am sure with the correct styling you can get what you want.  Make sure you leave the HTMLWrappers in the html this is how Page automation find the different sections for repeating the data.

    Thank you very much for the sample . Just wondering if the html is generated one or custom created one.

    Also, I have a requirement to show different color codes based on  the returned value (class name is the same) from the  field _x003C_Type_x003E_k__BackingField. Not sure if style setter would do the job. highly appreciate any help with this.

    Attachments

    Updated on 2014-05-14T14:17:12Z at 2014-05-14T14:17:12Z by DivyaN23
  • gsager
    gsager
    139 Posts

    Re: How can the DCM Style be altered

    ‏2014-05-14T15:27:10Z  
    • DivyaN23
    • ‏2014-05-14T14:16:27Z

    Thank you very much for the sample . Just wondering if the html is generated one or custom created one.

    Also, I have a requirement to show different color codes based on  the returned value (class name is the same) from the  field _x003C_Type_x003E_k__BackingField. Not sure if style setter would do the job. highly appreciate any help with this.

    So the html was generated by Right clicking on the table in design view and selecting generate html for data layout which gives you the current htnl for the selected item and adds an html Data Layout builder to your model referencing this file.

    The initial one was the table based html but I thought you might like want the div based version which I made from the table one making sure to keep the HTMLWrapper tags and put the divs, I wanted in the correct sections.

    For the color coding you could set the colors using a style setter. But you could also do it using by setting the class to the type

        <div name="_x003C_Title_x003E_k__BackingField_x003C_Title_x003E_k__BackingField_ColumnData"><span name="_x003C_Title_x003E_k__BackingField" class="outputData  <%= JSPSupport.stringValue(webAppAccess.getVariables().getXmlText("EventLoopVar", "Event/_x003C_Type_x003E_k__BackingField"), true) %>"></span></div>
     

    here I use the current value of the _x003C_Type_x003E_k__BackingField to add a class to the span that could set the color in the class style.

    see attached file

     

    Attachments

  • DivyaN23
    DivyaN23
    72 Posts

    Re: How can the DCM Style be altered

    ‏2014-08-06T13:52:09Z  
    • gsager
    • ‏2014-05-14T15:27:10Z

    So the html was generated by Right clicking on the table in design view and selecting generate html for data layout which gives you the current htnl for the selected item and adds an html Data Layout builder to your model referencing this file.

    The initial one was the table based html but I thought you might like want the div based version which I made from the table one making sure to keep the HTMLWrapper tags and put the divs, I wanted in the correct sections.

    For the color coding you could set the colors using a style setter. But you could also do it using by setting the class to the type

        <div name="_x003C_Title_x003E_k__BackingField_x003C_Title_x003E_k__BackingField_ColumnData"><span name="_x003C_Title_x003E_k__BackingField" class="outputData  <%= JSPSupport.stringValue(webAppAccess.getVariables().getXmlText("EventLoopVar", "Event/_x003C_Type_x003E_k__BackingField"), true) %>"></span></div>
     

    here I use the current value of the _x003C_Type_x003E_k__BackingField to add a class to the span that could set the color in the class style.

    see attached file

     

    I have another requirement, where the date(dd MMM yyyy) has different styling for the day(dd) and for month,year(MMM yyyy). So just wondering if I can do something like EventDate.subString(0,2) and EventDate.subString(3,9) for the below code, so that I can apply different styles for dd and MMM yyyy.

    <div style="test-align: center" name="EventDate" class="dateOutput"
                        value="Field Value" id="Samplepage1EventDate_field"></div>

    Thanks for your time!

     

    Attachments

  • mburati
    mburati
    2575 Posts

    Re: How can the DCM Style be altered

    ‏2014-08-06T18:35:06Z  
    • DivyaN23
    • ‏2014-08-06T13:52:09Z

    I have another requirement, where the date(dd MMM yyyy) has different styling for the day(dd) and for month,year(MMM yyyy). So just wondering if I can do something like EventDate.subString(0,2) and EventDate.subString(3,9) for the below code, so that I can apply different styles for dd and MMM yyyy.

    <div style="test-align: center" name="EventDate" class="dateOutput"
                        value="Field Value" id="Samplepage1EventDate_field"></div>

    Thanks for your time!

     

    As suggested in your other thread, the most straightforward way I know of, for having different formatting, would be to split them into multiple fields, as described in your thread here:

    https://www.ibm.com/developerworks/community/forums/html/topic?id=11ae734e-df10-4815-8ff8-9d94d5bdf9ba&ps=25

    I hope that info helps,

    ..Mike Burati

    http://www-10.lotus.com/ldd/pfwiki.nsf/

    The postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.