Customize DVMessage

In our documentation, we show you how to call a message and how to customize it according to the type of message as follows:

msg( DVMessageGetBasicNotificationMsg.Udp(!"Title!", !"Description" ,DVMessageType.MessageType, "", DVMessageBoolean.True,"") )

 

Where DVMessageType is a domain where you can choose between error, information, regular, success to display it with different colors.

We will customize it to look like this:

You can customize this message dynamically by changing the description with format('<H4> %1 </H4>%2', &TitleMsg, &DescriptionMsg)

Thus, we can load the variables with different messages and reuse the call to the message.

In this case, we will use H4 to create a title instead of using the first parameter for the title(leave this field with quotes only), so we can format the icon.

&TitleMsg = 'Information'
&DescriptionMsg = 'This is an information message'
msg(DVMessageGetBasicNotificationMsg.Udp( '', format('<H4> %1 </H4>%2', &TitleMsg, &DescriptionMsg), DVMessageType.information, &ControlSelector, DVMessageBoolean.False, &ClickRedirectURL, ''))
 

Add this CSS code to your Design System so that it takes the colors from the area where the icon is displayed and we can give it the desired format.

.alert-info .ui-pnotify-icon span
 {
      background-color: #17647a !important;
      display: inline;
      width: 39px;
      height: 100%;
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      align-content: center;
      text-align: center;
      border-radius: 5px 0px 0px 5px;
  }

  .alert-danger .ui-pnotify-icon span
 {
      background-color: #852520 !important;
      display: inline;
      width: 39px;
      height: 100%;
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      align-content: center;
      text-align: center;
      border-radius: 5px 0px 0px 5px;
  }

  .alert-warning .ui-pnotify-icon span
 {
      background-color: #9f6107 !important;
      display: inline;
      width: 39px;
      height: 100%;
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
     align-content: center;
      text-align: center;
      border-radius: 5px 0px 0px 5px;
  }

  .alert-success .ui-pnotify-icon span
 {
      background-color: green !important;
      display: inline;
      width: 39px;
      height: 100%;
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      align-content: center;
      text-align: center;
      border-radius: 5px 0px 0px 5px;
  }
 

0 Votos