• Resolved Merlin Silk

    (@merlinsilk)


    Hi Peter,
    the next task I have, is to style my table as displayed on a page, and I am hoping for a (maybe a bit more advanced) tutorial.
    I have my table with all its fields ID,Last,First,Source,Email,Status,Added. All these fields get the same horizontal space which wastes a lot for ID but causes Email to wrap in its column. How would I go about styling the table so that I can give each column just the space it needs.
    Cheers,
    Merlin

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    Hi Merlin,

    Good to hear from you again! πŸ™‚

    Which fields do you want to style? The fields on the list table? Or the fields in the data entry form?

    I added a page “Styling β€˜wpdadiehard’ pages” to the website: https://wpdataaccess.com/docs/documentation/shortcodes/styling-wpdadiehard-pages/

    It does a bit of styling both, the list table and the data entry form, but not (yet) on a field level. Can you please checkout this page to see if this is you need?

    Best regards,
    Peter

    Thread Starter Merlin Silk

    (@merlinsilk)

    Hi Peter,
    thank you so much – great starting point.
    There is something on the field level which I found when playing with it a bit. I added
    .column-ID {
    display: none;
    }
    (my first column name is ID) and I was able to make the first column disappear. I was just guessing that this would work to suppress a column. Initially, I thought that I could use filter_field_name with a list of column names as parameter to only show those columns, but I guess that’s not what this parameter is for πŸ™‚ [as a suggestion: could we get a parameter ‘select_field_names’ with a value of comma-separated column names to show only those columns??]

    You do have a class of ‘column-fieldname’ to address specific columns but I guess my css is not good enough to use them to style the width of my columns – any hint for me?

    And one more about styling: On my page the block of search and table navigation is split into different rows while in your video they are in one line each. To demonstrate

    two lines for the search:
    ______________ (text box)
    SEARCH (button)

    and three lines for the navitation:
    xxxxx items << <
    _______________ (text box)
    of yyy > >>

    I looked through the css but could not see how I could pull these lines together as in your video.

    Cheers,
    Merlin

    Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    Hi Merlin,

    Your request is a reminder that I need to inform users about the available plugin features. πŸ˜‰ Thank your that!

    A long time ago I reserved some space for an additional Data Projects video named “Fine Tuning”. I just forgot to do it… I will add a tutorial to demonstrate how you can hide columns, change to order in which they are shown and some more. Comming very soon. I promise!

    I’m not going to leave you without an answer of course…

    If you want to hide specific columns, you should use the Data Projects tool. You can find a video tutorial here: https://wpdataaccess.com/docs/documentation/shortcodes/shortcode-wpdadiehard/

    This is how you can hide specific columns for Data Projects pages:
    – Navigate to the Data Projects tool
    – Click on tab Manage Table Options
    – Click on button Add Table To Repository
    – Select your table from the list
    – Click on button Add Selected Table To Repository
    – Your table is now added to the repository

    There is a section “Manage columns for list table of table <your-table-name>” where you can hide columns in the list table. To change the order in which columns are shown click on the icon at the beginning of a column and drag it to another position.

    In section “Manage columns for data entry form for table <your-table-name>” you can the same for your data entry forms. Some mandatory columns cannot be hidden, while others can. I’ll explain why in the video.

    You can change the table settings in your css, but with limited possibilities. You can only change the width of the label, data and icon columns. Simple form is not very flexible. This is something for future development.

    Depending on the conflicts with your WordPress theme the styling of plugin elements can be a challenge. Unfortunately this is very specific for each theme. If you teel me which theme you use I might be able to see if I can help.

    I hope this helps Merlin!

    Best regards,
    Peter

    Thread Starter Merlin Silk

    (@merlinsilk)

    Hi Peter,
    Thank you so much!
    The styling issues are solved after digging into the css with the debug function in Chrome. That strange behavior of breaking apart the search and navigation lines were caused by a with:100% and display:block settings for input fields in twentyseventeen. I reset them to auto and inline for the two elements – and voila – single lines πŸ™‚
    But for the other part with hiding columns I must be missing something, as I followed your instruction and nothing changed.
    I have not been using publisher for my purpose but use the following shortcode:
    [wpdadiehard table_name=”maillist” show_view_link=”true” allow_insert=”true” allow_update=”true” allow_delete=”true” search_box_enabled=”true” bulk_export_enabled=”true”]
    on a private page. (I make my user log into the backend as editor to access it. This way a visitor without login does not even find out that the page is even there.)
    Maybe this is the reason that the shortcode does not see the changes I made (uncheck the ID column)?
    My other idea I had – css setting display:none for class column-ID – does remove the column, but it also removes the view/edit/delete links on that first columns, so I can’t really use the css method.
    Maybe we do need a wpdadiehard parameter to select the displayed columns and then show the view/edit/delete links on whatever the first column ends up to be.
    Cheers,
    Merlin

    Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    Hi Merlin,

    Thank you for your explanation. I see now why it is not working.

    If you want to use the “Manage Table Options” feature of the Data Projects tool, you need to add the parameters project_id and page_id of your project page to your shortcode. When you are using the table_name parameter, table options are not taken into account. These only apply to Data Projects.

    Your shortcode should look something like this:
    [wpdadiehard project_id=”?” page_id=”?”]

    You have to replace the question marks with your project_id and page_id. You can skip all other parameters as they are defined in your Data Projects page.

    Now I wonder, have you already created a Data Project and added a page to it? If not, you need to do this first. You can find a tutorial here:
    https://wpdataaccess.com/docs/documentation/data-projects/video-tutorials/

    It is quite simple and ones you have created a Data Projects page, administration becomes much easier. If you do not want to use your app in the dashboard you can hide it in your menu. You just need to set Add To Menu to No.

    I hope I’ve clear enough. If not, please let me know.

    Best regards,
    Peter

    Thread Starter Merlin Silk

    (@merlinsilk)

    Hi Peter,

    I had the project created already, so I had the project_id, but I rummaged your whole documentation but was not smart enough to figure out how I would get a page_id and the die-hard shortcode complains when I don’t give it that page_id.
    I though that it had something to do with first creating a menu in the dashboard but I failed to do that as well.
    I did go to the dashboard menu in settings and entered a name of Mail List and a slug of maillist and selected all users except subscribers (I was logged in as admin) but no menu appeared in the dashboard.
    What am I doing wrong?
    Thank you,
    Merlin

    Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    Hi Merlin,

    Good point! I haven’t been smart enough to add the location of the page_id to my documentation… πŸ˜‰

    I updated the documentation and added an example and a screenshot. You can find the screenshot here:
    http://wpdataaccess.com/wp-content/uploads/2019/10/formerlin.png

    Thank you for bringing this up!

    Cheers,
    Peter

    Thread Starter Merlin Silk

    (@merlinsilk)

    Hi Peter,
    thank you so much for all your help – I got it all working perfectly now.
    One little gotcha for somebody else reading this and scratching his head:

    From an earlier message from you I copied
    [wpdadiehard project_id=”?” page_id=”?”]

    into my web page and replaced the question marks for my numbers – refreshed the page and … ERROR: Data Project page not found [need a valid project_id and page_id]

    I had to use my “intuitive debugging” to figure out that the quotes were the culprit. The ones on the web page from which I copied were not the straight quotes even though they looked nearly identical in the font WordPress displayed them.

    Once I replace the four ” with ” all was dandy.
    Cheers,
    Merlin

    Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    Hi Merlin,

    Good to hear it’s working! πŸ™‚ And good you mentioned the quotes. Have you how yours were changed as well? πŸ˜‰ I’ll try to remember to add hint to change to quotes next time.

    While you are learning to work with the plugin, I’m learning to improve the documentation and code. Thank you for your feedback and suggestions! They have proved to be very valuable for me.

    I’m closing this topic Merlin, but you’re welcome to open a new one if I can help.

    Cheers,
    Peter

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Request for another tutorial :-)’ is closed to new replies.