Showing icons on model-driven app views

Rudimar B. Althof

Simplifying Icon Addition in Dataverse Model-Driven Apps

When it comes to enhancing the user interface of model-driven apps in Dataverse, adding icons can significantly improve the visual representation of data. 



Let's dissect a piece of code that accomplishes just that, using straightforward language:


 function setStatusImage(rowDataFromGrid){

    //Parsing the json into an object
    let row  = JSON.parse(rowDataFromGrid)

    //name of the column
    let currentStatus = row.rba_transferstatus

    let imageName    =  ""
    let imageTooltip =  ""

    // Icons on my solution:
    // rba_warning_icon, rba_approved_green_png, rba_pending_orange_png

    //Setting the variables accordingly to the images
    switch(currentStatus){
       case "Pending":  
            imageName = "rba_pending_orange_png"
            imageTooltip = "Pending"
            break

        case "Received":
            imageName = "rba_approved_green_png"
            imageTooltip = "Received"
            break

        default:
            imageName = "rba_warning_icon"
            imageTooltip = "No info"            
    }

    var returnArray = [imageName, imageTooltip]
    return returnArray
}

function setStatusImageWithDegub(rowDataFromGrid){
    console.log("setStatusImageWithDegub - Debugging Data")
   
    let row  = JSON.parse(rowDataFromGrid)
    console.log(row)
   
    let image_array = setStatusImage(rowDataFromGrid)
    console.log(image_array)
   
    return image_array
}


Breaking It Down

setStatusImage:

  • This function takes data from a grid and interprets it.
  • It looks at the status of something (like 'Pending' or 'Received').
  • Based on the status, it selects the appropriate icon and a message to go along with it.
  • Then, it bundles the icon and message into an array and sends it back.

setStatusImageWithDebug:

  • Similar to setStatusImage, but it's equipped with debugging capabilities.
  • It prints extra information (like the grid data) to help identify any issues.
  • After displaying the data, it calls setStatusImage to get the icon and message.
  • Finally, it logs what it received from setStatusImage, aiding in debugging efforts.


The Icons Used in this example:

  

(Icons by  Icons8)

Conclusion

With these functions, adding icons to your Dataverse model-driven apps becomes a breeze. 

By simplifying the process and providing debugging assistance, developers can efficiently enhance the visual appeal and user experience of their applications.


Tags