furo-ui5-message-strip

furo-ui5-message-strip #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-message-strip.js';
exports FuroUi5MessageStrip js
exports <furo-ui5-message-strip> custom-element-definition
superclass LitElement
mixes FBP

Summary: furo ui5 message strip

Description #

The furo-ui5-message-strip component enables the embedding of app-related messages. It displays 4 types of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative. Each message can have a Close button, so that it can be removed from the UI, if needed.

It should be used together witch furo-ui5-message-strip-display. You can place those two components into different places. A good place for placing the furo-ui5-message-strip-display is on the app-shell. https://experience.sap.com/fiori-design-web/message-strip/

1
2
3

<!-- the display is placed where you want the message to appear -->
<furo-ui5-message-strip-display></furo-ui5-message-strip-display>
<furo-ui5-message-strip fn-show-information="--wire"></furo-ui5-message-strip>

Sample # 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<ui5-button @-click="--infoClicked" design="Default">Information</ui5-button>
<ui5-button @-click="--successClicked"  design="Positive">Success</ui5-button>
<ui5-button @-click="--errorClicked"  design="Negative">Error</ui5-button>
<ui5-button @-click="--warningClicked"  design="Warning">Warning</ui5-button>
<furo-ui5-message-strip 
  fn-show-information="--infoClicked" 
  fn-show-success="--successClicked" 
  fn-show-error="--errorClicked" 
  fn-show-warning="--warningClicked" 
  message="static message"></furo-ui5-message-strip>
<furo-ui5-message-strip-display></furo-ui5-message-strip-display>

Attributes and Properties #

hideCloseButton #

hide-close-button boolean default: false

Defines whether the MessageStrip renders close button.

hideIcon #

hide-icon boolean default: false

Defines whether the MessageStrip will show an icon in the beginning. You can directly provide an icon with the icon slot. Otherwise, the default icon for the type will be used.

size #

size String

define the width of ui5-messagestrip. e.g. 200px

message #

message String

the text message of the message strip

Events #

message-strip-closed #

at-message-strip-closed → {Object} payload

Fired when the MessageStrip is closed

Methods #

showInformation #

showInformation(msg `` ) ⟹ void

`` → fn-show-information

shows an information message if the param msg is empty, the attribute message is used.

  • msg

showSuccess #

showSuccess(msg `` ) ⟹ void

`` → fn-show-success

shows a success message if the param msg is empty, the attribute message is used.

  • msg

showWarning #

showWarning(msg `` ) ⟹ void

`` → fn-show-warning

shows a warning message if the param msg is empty, the attribute message is used.

  • msg

showError #

showError(msg `` ) ⟹ void

`` → fn-show-error

shows an error message if the param msg is empty, the attribute message is used.

  • msg

showGrpcLocalizedMessage #

showGrpcLocalizedMessage(rpcStatus `` ) ⟹ void

`` → fn-show-grpc-localized-message

shows a google rpc status message (message LocalizedMessage) Provides a localized error message that is safe to return to the user which can be attached to an RPC error.

Rendering rules:

  • Every @type LocalizedMessage inside of details[] is displayed with a line break in the message strip.
  • One message strip element is created per RPC status.

Example rpc status:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
 "code":3,
 "message":"Missing mandatory values",
 "details":[
   {"@type":"type.googleapis.com/google.rpc.LocalizedMessage","locale":"en-GB","message":"Please register all the mandatory values."},
   {"@type":"type.googleapis.com/google.rpc.LocalizedMessage","locale":"en-GB","message":"If you need help completing the data, call 0800-HELP-FURO."},
   {"@type":"type.googleapis.com/google.rpc.BadRequest","field_violations":[
     {"field":"short_form","description":"The country designation (short form) should be set."},
     {"field":"id","description":"The id should be ISO Alpha-2 code as described in the ISO 3166 international standard"},
     {"field":"area","description":"Please set a value for the field area."}]
   }
  ]}

Example message strip display:

| X  Please register all the mandatory values.
|    If you need help completing the data, call 0800-HELP-FURO.

https://github.com/googleapis/googleapis/blob/master/google/rpc/status.proto https://github.com/googleapis/googleapis/blob/master/google/rpc/error_details.proto

  • rpcStatus