Web Apps Timecard Notes

We add notes to our timecards so our employees can add detail support for our invoicing. I didn’t like that the notes were on a different page where the timecard was hidden, so I changed the #SystemNotes page to act like a bootstrap modal.

I also added a custom grid column to show some Font Awesome icons (see this prior article for help on that) so the user can easily see if they have added notes to that timecard row.  If there is no note, the user sees a plus sign – if they have added a note, they see a document icon.  I should mention that I’m using a custom column that I added to the TimecardModel and updated the Controller code to handle. I am not using one of the NoteID columns that already exist.

To add a new column for icons to your grid, you’ll use the built in functions @Html.GridBeginField, @Html.DSLTextArea, and @Html.GridEndField

Then I enclosed my buttons in a table to be consistent with how the other Web Apps elements are created. This creates every row with the plus (using the fa-plus class) 

Notice the {0} in the ID?  That assigns a sequential number to each ID that aligns with the Row Index, so row 0 will be NoteID0, row 1 will be NoteID1, row 2 will be NoteID2, etc..

@Html.GridBeginField("NoteID_MSDE", "Note", "DSLTextArea", False)
@Html.DSLTextArea("", "TimecardPFTLines.NoteID_MSDE", "", 6, BehaviorState.Enabled, AdditionalClass:="NoteID")
    <table>
      <tr>
        <td> 
          <a data-role="none" id="NoteBtn{0}" class="btn-group btn-group-sm btn btn-light btn-fal NoteBtn" href="javascript:OnDetailNotes();">
            <i class="fal fa-plus"></i>
          </a>
        </td>
      </tr>
    </table>
@Html.GridEndField()

Having plus signs when the row has notes isn’t a very good indicator for our users, so I created a JavaScript function, InitXChargeAndNoteIcons(),  that runs on grid load to loop through the grid and update the icons accordingly.  

function InitXChargeAndNoteIcons() {
    var grid = GetGrid('TimecardPFTLines_Grid');
    for (i = 0; i < grid.GetRowCount() ; i++) {
        var currentRow = grid.GetRow(i);
        if (currentRow.Cells['pm_id37'].Value() == 'DIR' || currentRow.Cells['pm_id37'].Value() == 'PLE') {
            currentRow.Cells['ld_id13'].Disabled(true);
        }
        if (currentRow.Cells['NoteID'].Value() > 0) {
            $('#NoteBtn' + i + ' i').removeClass('fa-plus').addClass('fa-file-alt');
        }
    }
}

I also needed to update the icons when a note is added or deleted, so I created a new function, SetWorkingRowNote(),  that runs on the OnSave() and OnDelete() functions in the DetailNote.vbhtml file.    I should mention that I also added code in these 2 prior functions to handle updating the form view icons; again using .addClass and .removeClass

function SetWorkingRowNoteID(noteId) {
    var grid = GetGrid('TimecardPFTLines_Grid');
    var activeRow = grid.GetActiveRow();
    if (activeRow == null) {activeRow = grid.GetLastActiveRow();}
    activeRow.Cells['NoteID'].Value(noteId);
    var elem = activeRow.Cells['NoteID'].GetElement().children[1];
    if (noteId == 0) {
        $(elem).find('i').removeClass('fa-file-alt').addClass('fa-plus');
    } else {
        $(elem).find('i').removeClass('fa-plus').addClass('fa-file-alt');
    }
}

Here are our new grid icons in use:

Feel free to share...

Leave a Reply

Close Menu