Introduction:
We got a requirement from one of my customers that we need to assign profile pictures and user names in SAP Design Studio. The user logs in using SAP BI Launchpad. So, based on the user we need to assign the profile pictures and user names to the user dynamically. Here, I’ve used a simple method to assign the Profile Picture to a single user. By repeating the condition used here, you can add the profile pictures of users as required. In my continuation blog, I'll be explaining about dynamically changing the user names.
Main Problem:
In SAP Design Studio, we don’t have any separate component to assign the Profile Photo for users. So, we need to plan for some other way, where we have to use some other component that could achieve this functionality.
Solution:
In this blog, I’ve explained a method to achieve the functionality of using dynamic profile pic for users by using the Image Component. The username would be fetched from the BI launchpad and based on the Username, the image of the user changes dynamically.
To achieve this follow the steps mentioned below:
1.You can either use an image in jpeg mode or can also use the image by converting it to a URI code. In case if you are going to use the URI converter, collect the Profile picture of the user and convert it to URI code, using Image to URI converter. The reason for using the URI code is that the site instantly removes the need for the need to fetch additional resources.
For example, we can use the below image:
After converting to URI code (You can refer to websites online to refer to the URI code), we get the below code:
<img src="data:image/jpeg;base64,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" alt="" />
2. Now, include the above code in the Script file created for the Dashboard in the CSS class as mentioned in the below screenshot:
3. From the above image, you can notice that the URI code is entered in the background-image CSS command. You would need to copy the part from “data” till “alt=” part in the URI code and enter it in the above script inside the url(); part. The background repeat option is set to no-repeat to show the image only once. Also, set the background size of the image using the above script. Here, I’ve chosen a square image of 45 X 45 pixels. Now, map the CSS Class to the image component as mentioned below. Here, I’ve created an image component named IMAGE_3:
4. Now, go to the ‘On Startup’ section of the Dashboard by clicking on the below part in the Properties section.
5. Write the below Script in the Script Editor part of the Application.
6. Refer to the below script:
if(DS_1.getInfo().user == "Administrator"){
IMAGE_3.setVisible(true);
}else{
IMAGE_3.setVisible(false);
}
In the above code, 'DS_1' is the data source and 'Administrator' is the name of the user. getInfo().user is used to compare the login username in the BI launchpad with the user who is mentioned in the Script.
IMAGE_3 is the image component we have used. I’ve just made the setVisible as true for the given user based on the condition.
7. Now, save the Dashboard and run it in BI Launchpad.
8. In order to test it, you can also test the above scenario by removing the username from the code that you have used. You would not be able to view the profile picture and user name now.
9. Thus, we can ensure that the above condition has worked out. In order to use multiple users with profile pics, we can try the nested if statement.
Conclusion:
So, in this blog, we have learned how to insert a profile pic dynamically based on the user trying to launch the dashboard using BI Launchpad. In our next blog, we can see how to dynamically change the username.
Reference:
We got a requirement from one of my customers that we need to assign profile pictures and user names in SAP Design Studio. The user logs in using SAP BI Launchpad. So, based on the user we need to assign the profile pictures and user names to the user dynamically. Here, I’ve used a simple method to assign the Profile Picture to a single user. By repeating the condition used here, you can add the profile pictures of users as required. In my continuation blog, I'll be explaining about dynamically changing the user names.
Main Problem:
In SAP Design Studio, we don’t have any separate component to assign the Profile Photo for users. So, we need to plan for some other way, where we have to use some other component that could achieve this functionality.
Solution:
In this blog, I’ve explained a method to achieve the functionality of using dynamic profile pic for users by using the Image Component. The username would be fetched from the BI launchpad and based on the Username, the image of the user changes dynamically.
To achieve this follow the steps mentioned below:
1.You can either use an image in jpeg mode or can also use the image by converting it to a URI code. In case if you are going to use the URI converter, collect the Profile picture of the user and convert it to URI code, using Image to URI converter. The reason for using the URI code is that the site instantly removes the need for the need to fetch additional resources.
For example, we can use the below image:
After converting to URI code (You can refer to websites online to refer to the URI code), we get the below code:
<img src="data:image/jpeg;base64,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" alt="" />
2. Now, include the above code in the Script file created for the Dashboard in the CSS class as mentioned in the below screenshot:
3. From the above image, you can notice that the URI code is entered in the background-image CSS command. You would need to copy the part from “data” till “alt=” part in the URI code and enter it in the above script inside the url(); part. The background repeat option is set to no-repeat to show the image only once. Also, set the background size of the image using the above script. Here, I’ve chosen a square image of 45 X 45 pixels. Now, map the CSS Class to the image component as mentioned below. Here, I’ve created an image component named IMAGE_3:
4. Now, go to the ‘On Startup’ section of the Dashboard by clicking on the below part in the Properties section.
5. Write the below Script in the Script Editor part of the Application.
6. Refer to the below script:
if(DS_1.getInfo().user == "Administrator"){
IMAGE_3.setVisible(true);
}else{
IMAGE_3.setVisible(false);
}
In the above code, 'DS_1' is the data source and 'Administrator' is the name of the user. getInfo().user is used to compare the login username in the BI launchpad with the user who is mentioned in the Script.
IMAGE_3 is the image component we have used. I’ve just made the setVisible as true for the given user based on the condition.
7. Now, save the Dashboard and run it in BI Launchpad.
8. In order to test it, you can also test the above scenario by removing the username from the code that you have used. You would not be able to view the profile picture and user name now.
9. Thus, we can ensure that the above condition has worked out. In order to use multiple users with profile pics, we can try the nested if statement.
Conclusion:
So, in this blog, we have learned how to insert a profile pic dynamically based on the user trying to launch the dashboard using BI Launchpad. In our next blog, we can see how to dynamically change the username.
Reference:
- SAP Managed Tags:
