How to use a card as default list item

Setup, Configuration and Use Beginners
, ,
1

I’ve created a custom widget to display some information about my printer. I would now like to use this as a default list widget to be used in the automatically generated location pages:

Screenshot at 2021-04-05 19-49-25
Screenshot at 2021-04-05 19-49-25809×561 43.4 KB

As a first try I just wrapped the card with a list item, but this does not work. Is it possible to display such a widget in the automatically generated pages. What do I need to do to achieve that?

uid: printer_status_list_v1
tags: []
props:
  parameterGroups: []
timestamp: Apr 5, 2021, 7:44:53 PM
component: oh-list-item
slots:
  default:
    - component: f7-card
      config:
        title: HP LaserJet Pro MFP M479
        footer: =items.HPColorLaserJetProM478f9f925EE5_Status.state
      slots:
        default:
          - component: 
          - component: f7-card-content
            slots:
              default:
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: 15
                        slots:
                          default:
                            - component: oh-link
                              config:
                                textColor: black
                                text: =items.HPColorLaserJetProM478f9f925EE5_BlackLevel.state
                      - component: f7-col
                        config:
                          width: 85
                        slots:
                          default:
                            - component: f7-progressbar
                              config:
                                style:
                                  --f7-theme-color: rgb(0, 0, 0)
                                  --f7-progressbar-height: 20px
                                progress: =Number(items.HPColorLaserJetProM478f9f925EE5_BlackLevel.state.split(' ')[0])
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: 15
                        slots:
                          default:
                            - component: oh-link
                              config:
                                textColor: black
                                text: =items.HPColorLaserJetProM478f9f925EE5_CyanLevel.state
                      - component: f7-col
                        config:
                          width: 85
                        slots:
                          default:
                            - component: f7-progressbar
                              config:
                                style:
                                  --f7-theme-color: rgb(0, 255, 255)
                                  --f7-progressbar-height: 20px
                                progress: =Number(items.HPColorLaserJetProM478f9f925EE5_CyanLevel.state.split(' ')[0])
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: 15
                        slots:
                          default:
                            - component: oh-link
                              config:
                                textColor: black
                                text: =items.HPColorLaserJetProM478f9f925EE5_YellowLevel.state
                      - component: f7-col
                        config:
                          width: 85
                        slots:
                          default:
                            - component: f7-progressbar
                              config:
                                style:
                                  --f7-theme-color: rgb(255, 255, 0)
                                  --f7-progressbar-height: 20px
                                progress: =Number(items.HPColorLaserJetProM478f9f925EE5_YellowLevel.state.split(' ')[0])
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: 15
                        slots:
                          default:
                            - component: oh-link
                              config:
                                textColor: black
                                text: =items.HPColorLaserJetProM478f9f925EE5_MagentaLevel.state
                      - component: f7-col
                        config:
                          width: 85
                        slots:
                          default:
                            - component: f7-progressbar
                              config:
                                style:
                                  --f7-theme-color: rgb(255, 0, 255)
                                  --f7-progressbar-height: 20px
                                progress: =Number(items.HPColorLaserJetProM478f9f925EE5_MagentaLevel.state.split(' ')[0])

with kind regards,
Patrik

2
  • use a plain f7-list-item and the content slot instead of default.
  • while you can add a card in the content slot, you can also use little-known components f7-list-item-row and f7-list-item-cell to build a table-like layout (List View (Table View) | Framework7 Documentation) in your list item, it simplifies the widget quite a bit
uid: printer_status_list_v1
tags: []
props:
  parameterGroups: []
component: f7-list-item
config:
  title: Printer
  subtitle: Status
  after: After
  header: Header
  footer: Footer
slots:
  content:
    - component: f7-list-item-row
      slots:
        default:
          - component: f7-list-item-cell
            config:
              style:
                width: 15%
            slots:
              default:
                - component: oh-link
                  config:
                    textColor: black
                    text: =items.HPColorLaserJetProM478f9f925EE5_BlackLevel.state
          - component: f7-list-item-cell
            slots:
              default:
                - component: f7-progressbar
                  config:
                    style:
                      --f7-theme-color: rgb(0, 0, 0)
                      --f7-progressbar-height: 20px
                    progress: 10
    - component: f7-list-item-row
      slots:
        default:
          - component: f7-list-item-cell
            config:
              style:
                width: 15%
            slots:
              default:
                - component: oh-link
                  config:
                    textColor: black
                    text: =items.HPColorLaserJetProM478f9f925EE5_CyanLevel.state
          - component: f7-list-item-cell
            slots:
              default:
                - component: f7-progressbar
                  config:
                    style:
                      --f7-theme-color: rgb(0, 255, 255)
                      --f7-progressbar-height: 20px
                    progress: 20
    - component: f7-list-item-row
      slots:
        default:
          - component: f7-list-item-cell
            config:
              style:
                width: 15%
            slots:
              default:
                - component: oh-link
                  config:
                    textColor: black
                    text: =items.HPColorLaserJetProM478f9f925EE5_YellowLevel.state
          - component: f7-list-item-cell
            slots:
              default:
                - component: f7-progressbar
                  config:
                    style:
                      --f7-theme-color: rgb(255, 255, 0)
                      --f7-progressbar-height: 20px
                    progress: 30
    - component: f7-list-item-row
      slots:
        default:
          - component: f7-list-item-cell
            config:
              style:
                width: 15%
            slots:
              default:
                - component: oh-link
                  config:
                    textColor: black
                    text: =items.HPColorLaserJetProM478f9f925EE5_MagentaLevel.state
          - component: f7-list-item-cell
            slots:
              default:
                - component: f7-progressbar
                  config:
                    style:
                      --f7-theme-color: rgb(255, 0, 255)
                      --f7-progressbar-height: 20px
                    progress: 40

image

3 Likes
3

Hi Yannick,

thank you for the explanation and the example :slight_smile: . Worked like a charm.