2024-03-04 10:44:38 +00:00
<!doctype html>
2024-05-03 14:21:14 +00:00
< html lang = "en" dir = "ltr" class = "docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-extensions/developing/onboarding-workflow" data-has-hydrated = "false" >
2024-03-04 10:44:38 +00:00
< head >
< meta charset = "UTF-8" >
2024-08-14 11:49:56 +00:00
< meta name = "generator" content = "Docusaurus v3.5.2" >
2024-05-03 14:21:14 +00:00
< title data-rh = "true" > Onboarding workflow | Podman Desktop< / title > < meta data-rh = "true" name = "viewport" content = "width=device-width,initial-scale=1" > < meta data-rh = "true" name = "twitter:card" content = "summary_large_image" > < meta data-rh = "true" property = "og:image" content = "https://podman-desktop.io/img/banner_podman-desktop.png" > < meta data-rh = "true" name = "twitter:image" content = "https://podman-desktop.io/img/banner_podman-desktop.png" > < meta data-rh = "true" property = "og:url" content = "https://podman-desktop.io/docs/extensions/developing/onboarding-workflow" > < meta data-rh = "true" property = "og:locale" content = "en" > < meta data-rh = "true" name = "docusaurus_locale" content = "en" > < meta data-rh = "true" name = "docsearch:language" content = "en" > < meta data-rh = "true" name = "docusaurus_version" content = "current" > < meta data-rh = "true" name = "docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" name = "docsearch:version" content = "current" > < meta data-rh = "true" name = "docsearch:docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" property = "og:title" content = "Onboarding workflow | Podman Desktop" > < meta data-rh = "true" name = "description" content = "Podman Desktop onboarding workflow reference" > < meta data-rh = "true" property = "og:description" content = "Podman Desktop onboarding workflow reference" > < meta data-rh = "true" name = "keywords" content = "podman desktop,extension,writing,onboarding" > < link data-rh = "true" rel = "icon" href = "/img/favicon.ico" > < link data-rh = "true" rel = "canonical" href = "https://podman-desktop.io/docs/extensions/developing/onboarding-workflow" > < link data-rh = "true" rel = "alternate" href = "https://podman-desktop.io/docs/extensions/developing/onboarding-workflow" hreflang = "en" > < link data-rh = "true" rel = "alternate" href = "https://podman-desktop.io/docs/extensions/developing/onboarding-workflow" hreflang = "x-default" > < link data-rh = "true" rel = "preconnect" href = "https://MR01ANKQ9S-dsn.algolia.net" crossorigin = "anonymous" > < link rel = "alternate" type = "application/rss+xml" href = "/blog/rss.xml" title = "Podman Desktop RSS Feed" >
2024-03-04 10:44:38 +00:00
< link rel = "alternate" type = "application/atom+xml" href = "/blog/atom.xml" title = "Podman Desktop Atom Feed" >
< link rel = "alternate" type = "application/json" href = "/blog/feed.json" title = "Podman Desktop JSON Feed" >
< link rel = "search" type = "application/opensearchdescription+xml" title = "Podman Desktop" href = "/opensearch.xml" >
< link rel = "preconnect" href = "https://podman-desktop-website.goatcounter.com" >
2024-10-16 07:56:49 +00:00
< script async src = "//gc.zgo.at/count.js" data-goatcounter = "https://podman-desktop-website.goatcounter.com/count" > < / script > < link rel = "stylesheet" href = "/assets/css/styles.4b064f4a.css" >
2024-10-28 07:39:12 +00:00
< script src = "/assets/js/runtime~main.fb2ee704.js" defer = "defer" > < / script >
2024-10-18 11:41:56 +00:00
< script src = "/assets/js/main.7f3ca654.js" defer = "defer" > < / script >
2024-03-04 10:44:38 +00:00
< / head >
< body class = "navigation-with-keyboard" >
2024-10-18 11:41:56 +00:00
< script > ! function ( ) { function t ( t ) { document . documentElement . setAttribute ( "data-theme" , t ) } var e = function ( ) { try { return new URLSearchParams ( window . location . search ) . get ( "docusaurus-theme" ) } catch ( t ) { } } ( ) || function ( ) { try { return window . localStorage . getItem ( "theme" ) } catch ( t ) { } } ( ) ; null !== e ? t ( e ) : window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches ? t ( "dark" ) : window . matchMedia ( "(prefers-color-scheme: light)" ) . matches ? t ( "light" ) : t ( "dark" ) } ( ) , function ( ) { try { const c = new URLSearchParams ( window . location . search ) . entries ( ) ; for ( var [ t , e ] of c ) if ( t . startsWith ( "docusaurus-data-" ) ) { var a = t . replace ( "docusaurus-data-" , "data-" ) ; document . documentElement . setAttribute ( a , e ) } } catch ( t ) { } } ( ) < / script > < div id = "__docusaurus" > < div role = "region" aria-label = "Skip to main content" > < a class = "skipToContent_oPtH" href = "#__docusaurus_skipToContent_fallback" > Skip to main content< / a > < / div > < nav aria-label = "Main" class = "navbar navbar--fixed-top" > < div class = "navbar__inner" > < div class = "navbar__items" > < button aria-label = "Toggle navigation bar" aria-expanded = "false" class = "navbar__toggle clean-btn" type = "button" > < svg width = "30" height = "30" viewBox = "0 0 30 30" aria-hidden = "true" > < path stroke = "currentColor" stroke-linecap = "round" stroke-miterlimit = "10" stroke-width = "2" d = "M4 7h22M4 15h22M4 23h22" > < / path > < / svg > < / button > < a class = "navbar__brand" href = "/" > < div class = "navbar__logo" > < img src = "/img/logo.svg" alt = "Podman Desktop Logo" class = "themedComponent_siVc themedComponent--light_hHel" height = "56" > < img src = "/img/logo.svg" alt = "Podman Desktop Logo" class = "themedComponent_siVc themedComponent--dark_yETr" height = "56" > < / div > < b class = "navbar__title text--truncate" > podman desktop< / b > < / a > < a aria-current = "page" class = "navbar__item navbar__link navbar__link--active" href = "/docs/intro" > Documentation< / a > < a class = "navbar__item navbar__link" href = "/features" > Features< / a > < a class = "navbar__item navbar__link" href = "/downloads" > Downloads< / a > < a class = "navbar__item navbar__link" href = "/extend" > Extend< / a > < a class = "navbar__item navbar__link" href = "/blog" > Blog< / a > < a class = "navbar__item navbar__link" href = "/tutorial" > Tutorials< / a > < / div > < div class = "navbar__items navbar__items--right" > < a href = "https://github.com/containers/podman-desktop" target = "_blank" rel = "noopener noreferrer" class = "navbar__item navbar__link header-github-link" > < / a > < div class = "toggle_ki11 colorModeToggle_Hewu" > < button class = "clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m" type = "button" disabled = "" title = "Switch between dark and light mode (currently dark mode)" aria-label = "Switch between dark and light mode (currently dark mode)" aria-live = "polite" > < svg viewBox = "0 0 24 24" width = "24" height = "24" class = "lightToggleIcon_lgto" > < path fill = "currentColor" d = "M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z" > < / path > < / svg > < svg viewBox = "0 0 24 24" width = "24" height = "24" class = "darkToggleIcon_U96C" > < path fill = "currentColor" d = "M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3 . 86 , 0-7-3 . 14-7-7C5 , 9 . 07 , 6 . 81 , 6 . 55 , 9 . 37 , 5 . 51z M12 , 3c-4 . 97 , 0-9 , 4 . 03-9 , 9s4 . 03 , 9 , 9 , 9s9-4 . 03 , 9-9c0-0 . 46-0 . 04-0 . 92-0 . 1-1 . 36 c-0 . 98 , 1 . 37-2 . 58 , 2 . 26-4 . 4 , 2 . 26c-2 . 98 , 0-5 . 4-
2024-03-04 10:44:38 +00:00
< p > A Podman Desktop extension can offer an onboarding workflow to guide users in installing and setting up all the necessary tools for the extension to work, and optionally to provide explanations about the capabilities of the extension.< / p >
< p > Adding onboarding to an extension is as simple as writing JSON in the < code > package.json< / code > . Podman Desktop will convert the JSON object into actual code to render all items.< / p >
< p > Onboarding consists of a title, a description, media (image), an enablement clause, and a list of steps. Only the title, enablement clause, and the steps are mandatory, as they constitute the minimum information required to define a workflow.
Before getting into the details, let' s examine the JSON schema.< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " onboarding" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " object" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " properties" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " string" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " description" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " string" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " media" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " path" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "col
2024-08-14 11:49:56 +00:00
< h3 class = "anchor anchorWithStickyNavbar_JmGV" id = "title-description-and-media" > Title, Description and Media< a href = "#title-description-and-media" class = "hash-link" aria-label = "Direct link to Title, Description and Media" title = "Direct link to Title, Description and Media" > < / a > < / h3 >
2024-03-04 10:44:38 +00:00
< p > The < strong > title< / strong > , the < strong > description< / strong > and the < strong > media< / strong > are all placed in the top left of the onboarding page.
Only the title is required. The description and the media are optional.
If the media is not specified, Podman Desktop will display the default icon set by the extension in its < code > package.json< / code > .< / p >
< p > This is how this JSON is defined:< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token property" > " icon" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " icon.png" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > ...< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " onboarding" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " Podman Setup" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > < img decoding = "async" loading = "lazy" alt = "img0" src = "/assets/images/title_media_description-9afd3b427798bb088d84d412a20f1222.png" width = "1535" height = "983" class = "img_SS3x" > < / p >
2024-08-14 11:49:56 +00:00
< h3 class = "anchor anchorWithStickyNavbar_JmGV" id = "enablement" > Enablement< a href = "#enablement" class = "hash-link" aria-label = "Direct link to Enablement" title = "Direct link to Enablement" > < / a > < / h3 >
2024-03-04 10:44:38 +00:00
< p > The enablement clause allows Podman Desktop to determine when the onboarding should be enabled.
When this condition is met, the user will find a setup button within the resources page. Clicking on it will initiate the onboarding workflow.< / p >
< p > < img decoding = "async" loading = "lazy" alt = "img1" src = "/assets/images/setup_button-71362a4db9503ffb2fd2ae5b569112d5.png" width = "1602" height = "1010" class = "img_SS3x" > < / p >
2024-05-03 14:21:14 +00:00
< p > The enablement clause is mandatory and must be written by using < a href = "/docs/extensions/developing/when-clause-context" > when clauses< / a > .< / p >
2024-03-04 10:44:38 +00:00
< p > In the following example, we specify that the onboarding needs to be enabled if and only if the user' s OS is Linux, and the < code > podmanIsNotInstalled< / code > context value is true. Alternatively, if the user' s OS is different from Linux, that the < code > podmanMachineExists< / code > context value must be false. Essentially, if the user is on Linux, the onboarding must be enabled only if podman is not installed; for all other operating systems, it should be enabled if there is no Podman machine.< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token property" > " enablement" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " (isLinux & & onboardingContext:podmanIsNotInstalled) || (!isLinux & & !onboardingContext:podmanMachineExists)" < / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
2024-08-14 11:49:56 +00:00
< h3 class = "anchor anchorWithStickyNavbar_JmGV" id = "steps" > Steps< a href = "#steps" class = "hash-link" aria-label = "Direct link to Steps" title = "Direct link to Steps" > < / a > < / h3 >
2024-03-04 10:44:38 +00:00
< p > The steps property is required and includes the actual content that will be displayed to the user during the workflow.< / p >
< p > Each step can contribute to the onboarding process in various ways.
You can choose to display content explaining concepts to the user, incorporate input elements (such as buttons or textboxes) to encourage user interaction, run commands to perform installations, or showcase settings to be configured.< / p >
< p > Let' s look again at its schema:< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " object" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " properties" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " id" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " string" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " string" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " description" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " string" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " media" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "co
< p > A step has only two mandatory fields - id and title. All other properties are optional.< / p >
2024-08-14 11:49:56 +00:00
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "id" > Id< a href = "#id" class = "hash-link" aria-label = "Direct link to Id" title = "Direct link to Id" > < / a > < / h4 >
2024-03-04 10:44:38 +00:00
< p > The < strong > id< / strong > must be unique to identify a step, and it is never displayed directly to the user.< / p >
< p > To analyze more easily in telemetry the steps executed by users, the < strong > id< / strong > values must respect some rules.
To help developers respect these rules, a warning is displayed in case of non-repsect when Podman Destop loads the onboarding.< / p >
< p > The rules are:< / p >
< ul >
< li > for a step defining a command, the id must terminate with < code > Command< / code > ,< / li >
< li > for a state defining < code > state=' failed' < / code > , the id must terminate with < code > Failure< / code > ,< / li >
< li > for a state defining < code > state=' completed' < / code > , the id must terminate with < code > Success< / code > ,< / li >
< li > for any other step, the id must termminate with < code > View< / code > .< / li >
< / ul >
2024-08-14 11:49:56 +00:00
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "title-description-and-media-1" > Title, description and media< a href = "#title-description-and-media-1" class = "hash-link" aria-label = "Direct link to Title, description and media" title = "Direct link to Title, description and media" > < / a > < / h4 >
2024-03-04 10:44:38 +00:00
< p > The < strong > title< / strong > , < strong > description< / strong > and < strong > media< / strong > works as explained earlier. The only difference is their placement - they will appear in the top-center of the body.< / p >
< p > < img decoding = "async" loading = "lazy" alt = "img2" src = "/assets/images/step_title_description_media-185a47edbda6dd96d333a8d4a8b763be.png" width = "1539" height = "981" class = "img_SS3x" > < / p >
< p > < strong > Note:< / strong > If media is not specified, Podman Desktop will display the icon of the extension providing the onboarding.< / p >
2024-08-14 11:49:56 +00:00
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "command" > Command< a href = "#command" class = "hash-link" aria-label = "Direct link to Command" title = "Direct link to Command" > < / a > < / h4 >
2024-03-04 10:44:38 +00:00
< p > The < strong > command< / strong > field allows you to declare the name of a command that must be run when the step becomes active.
The command must be registered by the extension beforehand, or it will result in an error.< / p >
< p > In the example below, we tell Podman Desktop to call < code > podman.onboarding.checkPodmanInstalled< / code > when the < code > checkPodmanInstalled< / code > step becomes active.
Based on the result, we can then prompt the user to move to another step or display a message.< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token property" > " commands" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " command" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " podman.onboarding.checkPodmanInstalled" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " Podman: Check podman installation" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ]< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " onboarding" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " Podman Setup" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " steps" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " id" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " checkPodmanInstalled" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token
< p > During the execution of the command, the user will see a spinner next to the title.< / p >
< p > < img decoding = "async" loading = "lazy" alt = "img3" src = "/assets/images/spinner_title-1bcdcb7a4b920917f5b9dc93d945da28.png" width = "1536" height = "972" class = "img_SS3x" > < / p >
2024-08-14 11:49:56 +00:00
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "completionevents" > CompletionEvents< a href = "#completionevents" class = "hash-link" aria-label = "Direct link to CompletionEvents" title = "Direct link to CompletionEvents" > < / a > < / h4 >
2024-03-04 10:44:38 +00:00
< p > CompletionEvents define the conditions under which a step should be considered complete.< / p >
< p > It currently supports < code > onboardingContext< / code > and < code > onCommand< / code > events.
The former can be used to evaluate a context value, such as < code > onboardingContext:podmanIsInstalled< / code > . The latter checks if the command has been executed - < code > onCommand:podman.onboarding.installPodman< / code > .< / p >
< p > A practical example of progressing the user to the next step after the command finishes its execution is:< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token property" > " commands" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " command" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " podman.onboarding.checkPodmanInstalled" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " Podman: Check podman installation" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ]< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " onboarding" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " Podman Setup" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " steps" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " id" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " checkPodmanInstalled" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token
< p > When the < code > checkPodmanInstalled< / code > step becomes active, the command < code > podman.onboarding.checkPodmanInstalled< / code > is invoked. Upon completion of its execution, the step is considered complete, and the user is then moved to the next one.< / p >
< p > Here' s another example, this time using a context value:< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token property" > " commands" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " command" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " podman.onboarding.checkPodmanInstalled" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " Podman: Check podman installation" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ]< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " onboarding" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " Podman Setup" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " steps" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " id" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " checkPodmanInstalled" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token
< p > When the < code > checkPodmanInstalled< / code > step becomes active, the command < code > podman.onboarding.checkPodmanInstalled< / code > is invoked. As soon as the context value < code > podmanVersion< / code > equals < code > 4.7.2< / code > , the step is marked as completed, and the user is moved to the next one.< / p >
< p > You might wonder: who or what sets the context value? If you use a custom context value, it should be your extension' s job to set it. Following the example above, we could set the context value during the execution of < code > podman.onboarding.checkPodmanInstalled< / code > such as< / p >
2024-07-01 07:14:57 +00:00
< div class = "language-js codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-js codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > extensionApi< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > commands< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > registerCommand< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' podman.onboarding.checkPodmanInstalled' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > async< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token plain" > < / span > < span class = "token arrow operator" > => < / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // do something< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token spread operator" > ...< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // set podmanVersion context value so we can mark the step as complete< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > extensionApi< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > context< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > setValue< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' podmanVersion' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' 4.7.2' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' onboarding' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox =
2024-03-04 10:44:38 +00:00
< p > After updating the context, the UI is refreshed, and Podman Desktop moves the user to the new step.< / p >
2024-08-14 11:49:56 +00:00
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "content" > Content< a href = "#content" class = "hash-link" aria-label = "Direct link to Content" title = "Direct link to Content" > < / a > < / h4 >
2024-03-04 10:44:38 +00:00
< p > The < strong > content< / strong > property is an array of arrays where each item in the parent array defines a row, and each item in the child arrays defines a cell.< / p >
2024-07-01 07:14:57 +00:00
< div class = "language-js codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-js codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > content < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' cell' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' cell' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ]< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > //row< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' cell' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' cell' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' cell' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ]< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > //row< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ]< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
2024-03-04 10:44:38 +00:00
< p > The JSON schema for a content cell entry is< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " object" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " properties" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " value" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " string" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " highlight" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " boolean" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " when" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " string" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < spa
< p > < strong > Value< / strong > is the only mandatory field and it can be a simple string or a Markdown string to render advanced objects.< / p >
< p > In addition to all the standard Markdown syntax, Podman Desktop provides 3 custom Markdown components: button, link, and warnings list.< / p >
< p > 1 - You can create a button that executes a command (syntax - < code > :button[Name of the button]{command=command.example title=" tooltip text" }< / code > ) or behaves like a link (syntax - < code > :button[Name of the button]{href=http://my-link title=" tooltip text" }< / code > ).< / p >
< p > E.g.:< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token property" > " value" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " :button[Check requirements again]{command=podman.onboarding.checkPodmanRequirements}" < / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > < img decoding = "async" loading = "lazy" alt = "img4" src = "data:image/png;base64,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
< p > 2 - Similarly, you can create a link that executes a command (syntax < code > :link[Name of the command link]{command=command.example title=" tooltip text" }< / code > ) or behaves like a normal link (syntax - < code > :link[Name of the command link]{href=http://my-link title=" tooltip text" }< / code > )< / p >
< p > E.g.:< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token property" > " value" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " To install Podman please follow these :link[installation instructions]{href=https://podman.io/docs/installation#installing-on-linux}" < / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > < img decoding = "async" loading = "lazy" alt = "img5" src = "/assets/images/link_micromark-054caad1549f752aff722890fb11be7c.png" width = "613" height = "335" class = "img_SS3x" > < / p >
< p > 3 - The warning component allows displaying a list of items (syntax - < code > :warnings[[item]]< / code > ), where an item consists of:< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " object" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " properties" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " state" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " string" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " description" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " string" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " command" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " type" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " object" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " properties" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token
< p > Adding a complete list in the < code > package.json< / code > can be confusing, so a better approach is to use a context value< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token property" > " value" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " :warnings[${onboardingContext:warningsMarkdown}]" < / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > at runtime, < code > ${onboardingContext:warningsMarkdown}< / code > is replaced by the actual list filled in the backend< / p >
2024-07-01 07:14:57 +00:00
< div class = "language-js codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-js codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > warnings < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ]< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token spread operator" > ...< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > warning < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > state< / span > < span class = "token operator" > :< / span > < span class = "token plain" > res< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > successful< / span > < span class = "token plain" > < / span > < span class = "token operator" > ?< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' successful' < / span > < span class = "token plain" > < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' failed' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > description< / span > < span class = "token operator" > :< / span > < span class = "token plain" > res< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > description< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > docDescription< / span > < span class = "token operator" > :< / span > < span class = "token plain" > res< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > docLinksDescription< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > docLinks< / span > < span class = "token operator" > :< / span > < span class = "token plain" > res< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > docLinks< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > command< / span > < span class = "token operator" > :< / span > < span class = "token plain" > res< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > fixCommand< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token pla
2024-03-04 10:44:38 +00:00
< p > < img decoding = "async" loading = "lazy" alt = "img6" src = "/assets/images/warnings_micromark-0346d6cb229d20bd85d4eae552a91b31.png" width = "1598" height = "1007" class = "img_SS3x" > < / p >
< p > The < strong > highlight< / strong > and < strong > when< / strong > properties are optional. They are used to change the background color or define when the content column should be visible.< / p >
2024-08-14 11:49:56 +00:00
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "component" > Component< a href = "#component" class = "hash-link" aria-label = "Direct link to Component" title = "Direct link to Component" > < / a > < / h4 >
2024-03-04 10:44:38 +00:00
< p > Podman Desktop has some built-in components that can fit perfectly into an onboarding workflow, such as the < code > create new connection< / code > wizard.
If you are working on an extension that allows creating a Kubernetes cluster, it would not make sense to re-create a page where the user can add the name, the resources to use, and so on. This is when the component field comes in handy.< / p >
< p > By specifying the component you want to import, all the elements, styling, and actions are embedded into the step.< / p >
< p > Currently, Podman Desktop only supports two types of components for onboarding: < code > createContainerProviderConnection< / code > and < code > createKubernetesProviderConnection< / code > .< / p >
< p > An example can be seen in the Podman extension, where you can create a Podman machine during the workflow.< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " id" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " createPodmanMachine" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " Create a Podman machine" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " when" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " !onboardingContext:podmanMachineExists & & !isLinux" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " completionEvents" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " onboardingContext:podmanMachineExists" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ]< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " component" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " createContainerProviderConnection" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > < img decoding = "async" loading = "lazy" alt = "img7" src = "/assets/images/component_field-f5365284785944953339f77e4f63050e.png" width = "1517" height = "1001" class = "img_SS3x" > < / p >
< p > < strong > Note:< / strong > when using the < strong > component< / strong > field, you should omit the < strong > content< / strong > < / p >
2024-08-14 11:49:56 +00:00
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "when" > When< a href = "#when" class = "hash-link" aria-label = "Direct link to When" title = "Direct link to When" > < / a > < / h4 >
2024-03-04 10:44:38 +00:00
< p > The < strong > when< / strong > property defines when a step must be visible. You can use any when clause, and Podman Desktop will evaluate it any time the context changes.< / p >
2024-08-14 11:49:56 +00:00
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "state" > State< a href = "#state" class = "hash-link" aria-label = "Direct link to State" title = "Direct link to State" > < / a > < / h4 >
2024-03-04 10:44:38 +00:00
< p > The < strong > state< / strong > , when set, allows Podman Desktop to distinguish a normal step from a special one. It is used to associate a step with a failed state (< code > failed< / code > ) or, alternatively, with a complete state (< code > completed< / code > ).< / p >
< p > < strong > Note:< / strong > the last workflow step should have < code > completed< / code > state.< / p >
< p > Based on the < strong > state< / strong > , Podman Desktop might show some default objects.< / p >
< p > When a step with a failed state is encountered, Podman Desktop displays a < code > Retry< / code > button, allowing the user to restart the workflow.< / p >
2024-08-14 11:49:56 +00:00
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " id" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " podmanFailedInstallation" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " Failed installing Podman" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " when" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " onboardingContext:podmanFailedInstallation" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " state" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " failed" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " id" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " podmanSuccessfullySetup" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " Podman successfully setup" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " when" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " onboardingContext:podmanIsInstalled" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " state" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < s
2024-03-04 10:44:38 +00:00
< / body >
< / html >
